@gp-grid/vue 0.7.4 → 0.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +114 -8
- package/dist/index.js +1 -1
- package/package.json +2 -2
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as vue0 from "vue";
|
|
2
|
-
import { Component, ComputedRef, Ref, ShallowRef, VNode } from "vue";
|
|
2
|
+
import { Component as Component$1, ComputedRef, Ref, ShallowRef, VNode } from "vue";
|
|
3
3
|
|
|
4
4
|
//#region ../core/src/types/basic.d.ts
|
|
5
5
|
/** Cell data type primitive types */
|
|
@@ -60,6 +60,21 @@ interface FillHandleState {
|
|
|
60
60
|
/** Target column */
|
|
61
61
|
targetCol: number;
|
|
62
62
|
}
|
|
63
|
+
/** Event emitted when a cell value is changed via editing or fill drag */
|
|
64
|
+
interface CellValueChangedEvent<TData = Row> {
|
|
65
|
+
/** Stable row ID (from getRowId) */
|
|
66
|
+
rowId: RowId;
|
|
67
|
+
/** Column index */
|
|
68
|
+
colIndex: number;
|
|
69
|
+
/** Column field name */
|
|
70
|
+
field: string;
|
|
71
|
+
/** Previous cell value */
|
|
72
|
+
oldValue: CellValue;
|
|
73
|
+
/** New cell value */
|
|
74
|
+
newValue: CellValue;
|
|
75
|
+
/** The full row data object */
|
|
76
|
+
rowData: TData;
|
|
77
|
+
}
|
|
63
78
|
//#endregion
|
|
64
79
|
//#region ../core/src/types/highlighting.d.ts
|
|
65
80
|
/**
|
|
@@ -504,6 +519,8 @@ interface GridCoreOptions<TData = Row> {
|
|
|
504
519
|
getRowId?: (row: TData) => RowId;
|
|
505
520
|
/** Row/column/cell highlighting configuration */
|
|
506
521
|
highlighting?: HighlightingOptions<TData>;
|
|
522
|
+
/** Called when a cell value is changed via editing or fill drag. Requires getRowId. */
|
|
523
|
+
onCellValueChanged?: (event: CellValueChangedEvent<TData>) => void;
|
|
507
524
|
}
|
|
508
525
|
//#endregion
|
|
509
526
|
//#region ../core/src/types/input.d.ts
|
|
@@ -1081,6 +1098,8 @@ declare class GridCore<TData extends Row = Row> {
|
|
|
1081
1098
|
private headerHeight;
|
|
1082
1099
|
private overscan;
|
|
1083
1100
|
private sortingEnabled;
|
|
1101
|
+
private getRowId?;
|
|
1102
|
+
private onCellValueChanged?;
|
|
1084
1103
|
private scrollTop;
|
|
1085
1104
|
private scrollLeft;
|
|
1086
1105
|
private viewportWidth;
|
|
@@ -1107,6 +1126,7 @@ declare class GridCore<TData extends Row = Row> {
|
|
|
1107
1126
|
private virtualContentHeight;
|
|
1108
1127
|
private scrollRatio;
|
|
1109
1128
|
private isDestroyed;
|
|
1129
|
+
private _isDataLoading;
|
|
1110
1130
|
constructor(options: GridCoreOptions<TData>);
|
|
1111
1131
|
/**
|
|
1112
1132
|
* Initialize the grid and load initial data.
|
|
@@ -1141,6 +1161,7 @@ declare class GridCore<TData extends Row = Row> {
|
|
|
1141
1161
|
getEditState(): EditState | null;
|
|
1142
1162
|
getCellValue(row: number, col: number): CellValue;
|
|
1143
1163
|
setCellValue(row: number, col: number, value: CellValue): void;
|
|
1164
|
+
private clearSelectionIfInvalid;
|
|
1144
1165
|
private computeColumnPositions;
|
|
1145
1166
|
private emitContentSize;
|
|
1146
1167
|
private emitHeaders;
|
|
@@ -1192,6 +1213,12 @@ declare class GridCore<TData extends Row = Row> {
|
|
|
1192
1213
|
* Refresh data from the data source.
|
|
1193
1214
|
*/
|
|
1194
1215
|
refresh(): Promise<void>;
|
|
1216
|
+
/**
|
|
1217
|
+
* Fast-path refresh for transaction-based mutations.
|
|
1218
|
+
* Only re-fetches the visible window instead of all rows.
|
|
1219
|
+
* Use this when data was mutated via MutableDataSource transactions.
|
|
1220
|
+
*/
|
|
1221
|
+
refreshFromTransaction(): Promise<void>;
|
|
1195
1222
|
/**
|
|
1196
1223
|
* Refresh slot display without refetching data.
|
|
1197
1224
|
* Useful after in-place data modifications like fill operations.
|
|
@@ -1224,6 +1251,8 @@ declare class GridCore<TData extends Row = Row> {
|
|
|
1224
1251
|
setRow(index: number, data: TData): void;
|
|
1225
1252
|
/**
|
|
1226
1253
|
* Update the data source and refresh.
|
|
1254
|
+
* Preserves grid state (sort, filter, scroll position).
|
|
1255
|
+
* Cancels any active edit and clamps selection to valid range.
|
|
1227
1256
|
*/
|
|
1228
1257
|
setDataSource(dataSource: DataSource<TData>): Promise<void>;
|
|
1229
1258
|
/**
|
|
@@ -1324,10 +1353,15 @@ interface MutableClientDataSourceOptions<TData> {
|
|
|
1324
1353
|
debounceMs?: number;
|
|
1325
1354
|
/** Callback when transactions are processed. */
|
|
1326
1355
|
onTransactionProcessed?: (result: TransactionResult) => void;
|
|
1356
|
+
/** Use Web Worker for sorting large datasets (default: true) */
|
|
1357
|
+
useWorker?: boolean;
|
|
1358
|
+
/** Options for parallel sorting (only used when useWorker is true) */
|
|
1359
|
+
parallelSort?: ParallelSortOptions | false;
|
|
1327
1360
|
}
|
|
1328
1361
|
/**
|
|
1329
1362
|
* Creates a mutable client-side data source with transaction support.
|
|
1330
1363
|
* Uses IndexedDataStore for efficient incremental operations.
|
|
1364
|
+
* For large datasets, sorting is automatically offloaded to a Web Worker.
|
|
1331
1365
|
*/
|
|
1332
1366
|
declare function createMutableClientDataSource<TData extends Row = Row>(data: TData[], options: MutableClientDataSourceOptions<TData>): MutableDataSource<TData>;
|
|
1333
1367
|
//#endregion
|
|
@@ -1421,12 +1455,20 @@ interface GpGridProps<TData extends Row = Row> {
|
|
|
1421
1455
|
sortingEnabled?: boolean;
|
|
1422
1456
|
darkMode?: boolean;
|
|
1423
1457
|
wheelDampening?: number;
|
|
1424
|
-
cellRenderers?: Record<string, VueCellRenderer<TData> | Component>;
|
|
1425
|
-
editRenderers?: Record<string, VueEditRenderer<TData> | Component>;
|
|
1426
|
-
headerRenderers?: Record<string, VueHeaderRenderer | Component>;
|
|
1427
|
-
cellRenderer?: VueCellRenderer<TData> | Component;
|
|
1428
|
-
editRenderer?: VueEditRenderer<TData> | Component;
|
|
1429
|
-
headerRenderer?: VueHeaderRenderer | Component;
|
|
1458
|
+
cellRenderers?: Record<string, VueCellRenderer<TData> | Component$1>;
|
|
1459
|
+
editRenderers?: Record<string, VueEditRenderer<TData> | Component$1>;
|
|
1460
|
+
headerRenderers?: Record<string, VueHeaderRenderer | Component$1>;
|
|
1461
|
+
cellRenderer?: VueCellRenderer<TData> | Component$1;
|
|
1462
|
+
editRenderer?: VueEditRenderer<TData> | Component$1;
|
|
1463
|
+
headerRenderer?: VueHeaderRenderer | Component$1;
|
|
1464
|
+
/** Function to extract unique ID from row. Required when onCellValueChanged is provided. */
|
|
1465
|
+
getRowId?: (row: TData) => RowId;
|
|
1466
|
+
/** Called when a cell value is changed via editing or fill drag. Requires getRowId. */
|
|
1467
|
+
onCellValueChanged?: (event: CellValueChangedEvent<TData>) => void;
|
|
1468
|
+
/** Custom loading component to render instead of default spinner */
|
|
1469
|
+
loadingComponent?: Component$1<{
|
|
1470
|
+
isLoading: boolean;
|
|
1471
|
+
}>;
|
|
1430
1472
|
}
|
|
1431
1473
|
//#endregion
|
|
1432
1474
|
//#region src/GpGrid.vue.d.ts
|
|
@@ -1452,6 +1494,14 @@ type __VLS_Props = {
|
|
|
1452
1494
|
initialHeight?: number;
|
|
1453
1495
|
/** Row/column/cell highlighting configuration */
|
|
1454
1496
|
highlighting?: HighlightingOptions<Row>;
|
|
1497
|
+
/** Function to extract unique ID from row. Required when onCellValueChanged is provided. */
|
|
1498
|
+
getRowId?: (row: Row) => RowId;
|
|
1499
|
+
/** Called when a cell value is changed via editing or fill drag. Requires getRowId. */
|
|
1500
|
+
onCellValueChanged?: (event: CellValueChangedEvent<Row>) => void;
|
|
1501
|
+
/** Custom loading component to render instead of default spinner */
|
|
1502
|
+
loadingComponent?: Component<{
|
|
1503
|
+
isLoading: boolean;
|
|
1504
|
+
}>;
|
|
1455
1505
|
};
|
|
1456
1506
|
declare const __VLS_export: vue0.DefineComponent<__VLS_Props, {
|
|
1457
1507
|
core: vue0.ShallowRef<GridCore<unknown> | null, GridCore<unknown> | null>;
|
|
@@ -1478,6 +1528,10 @@ interface UseGpGridOptions<TData extends Row = Row> {
|
|
|
1478
1528
|
darkMode?: boolean;
|
|
1479
1529
|
wheelDampening?: number;
|
|
1480
1530
|
highlighting?: HighlightingOptions<TData>;
|
|
1531
|
+
/** Function to extract unique ID from row. Required when onCellValueChanged is provided. */
|
|
1532
|
+
getRowId?: (row: TData) => RowId;
|
|
1533
|
+
/** Called when a cell value is changed via editing or fill drag. Requires getRowId. */
|
|
1534
|
+
onCellValueChanged?: (event: CellValueChangedEvent<TData>) => void;
|
|
1481
1535
|
cellRenderers?: Record<string, VueCellRenderer<TData>>;
|
|
1482
1536
|
editRenderers?: Record<string, VueEditRenderer<TData>>;
|
|
1483
1537
|
headerRenderers?: Record<string, VueHeaderRenderer>;
|
|
@@ -1535,6 +1589,58 @@ interface UseGpGridResult<TData extends Row = Row> {
|
|
|
1535
1589
|
*/
|
|
1536
1590
|
declare function useGpGrid<TData extends Row = Row>(options: UseGpGridOptions<TData>): UseGpGridResult<TData>;
|
|
1537
1591
|
//#endregion
|
|
1592
|
+
//#region src/composables/useGridData.d.ts
|
|
1593
|
+
interface UseGridDataOptions<TData> {
|
|
1594
|
+
/** Function to extract a unique ID from each row. Required. */
|
|
1595
|
+
getRowId: (row: TData) => RowId;
|
|
1596
|
+
/** Debounce time for batching transactions in ms. Default 50. */
|
|
1597
|
+
debounceMs?: number;
|
|
1598
|
+
/** Use Web Worker for sorting large datasets (default: true) */
|
|
1599
|
+
useWorker?: boolean;
|
|
1600
|
+
/** Options for parallel sorting (only used when useWorker is true) */
|
|
1601
|
+
parallelSort?: ParallelSortOptions | false;
|
|
1602
|
+
}
|
|
1603
|
+
interface UseGridDataResult<TData> {
|
|
1604
|
+
/** The data source to pass to <GpGrid :data-source="dataSource" />. */
|
|
1605
|
+
dataSource: MutableDataSource<TData>;
|
|
1606
|
+
/** Update a single row by ID with partial data. */
|
|
1607
|
+
updateRow: (id: RowId, data: Partial<TData>) => void;
|
|
1608
|
+
/** Add rows to the data source. */
|
|
1609
|
+
addRows: (rows: TData[]) => void;
|
|
1610
|
+
/** Remove rows by ID. */
|
|
1611
|
+
removeRows: (ids: RowId[]) => void;
|
|
1612
|
+
/** Update a single cell value. */
|
|
1613
|
+
updateCell: (id: RowId, field: string, value: CellValue) => void;
|
|
1614
|
+
/** Clear all data from the data source. */
|
|
1615
|
+
clear: () => void;
|
|
1616
|
+
/** Get a row by its ID. */
|
|
1617
|
+
getRowById: (id: RowId) => TData | undefined;
|
|
1618
|
+
/** Get the current total row count. */
|
|
1619
|
+
getTotalRowCount: () => number;
|
|
1620
|
+
/** Force immediate processing of queued transactions. */
|
|
1621
|
+
flushTransactions: () => Promise<void>;
|
|
1622
|
+
}
|
|
1623
|
+
/**
|
|
1624
|
+
* Vue composable for efficient grid data mutations.
|
|
1625
|
+
*
|
|
1626
|
+
* Wraps `createMutableClientDataSource` to provide a simple API for
|
|
1627
|
+
* updating grid data without triggering full pipeline rebuilds.
|
|
1628
|
+
*
|
|
1629
|
+
* @example
|
|
1630
|
+
* ```vue
|
|
1631
|
+
* <script setup>
|
|
1632
|
+
* const { dataSource, updateRow, addRows } = useGridData(initialData, {
|
|
1633
|
+
* getRowId: (row) => row.id,
|
|
1634
|
+
* });
|
|
1635
|
+
* </script>
|
|
1636
|
+
*
|
|
1637
|
+
* <template>
|
|
1638
|
+
* <GpGrid :data-source="dataSource" :columns="columns" :row-height="36" />
|
|
1639
|
+
* </template>
|
|
1640
|
+
* ```
|
|
1641
|
+
*/
|
|
1642
|
+
declare const useGridData: <TData extends Row = Row>(initialData: TData[], options: UseGridDataOptions<TData>) => UseGridDataResult<TData>;
|
|
1643
|
+
//#endregion
|
|
1538
1644
|
//#region src/composables/useInputHandler.d.ts
|
|
1539
1645
|
interface VisibleColumnInfo$1 {
|
|
1540
1646
|
column: ColumnDefinition;
|
|
@@ -1817,4 +1923,4 @@ interface RenderHeaderOptions {
|
|
|
1817
1923
|
*/
|
|
1818
1924
|
declare function renderHeader(options: RenderHeaderOptions): VNode;
|
|
1819
1925
|
//#endregion
|
|
1820
|
-
export { type CellDataType, type CellPosition, type CellRange, type CellRendererParams, type CellValue, type ColumnDefinition, type ColumnFilterModel, type ContainerBounds, type DataSource, type DataSourceRequest, type DataSourceResponse, type DateFilterCondition, type DragState, type EditRendererParams, type FilterCondition, type FilterModel, type FilterPopupState, _default as GpGrid, _default as default, type GpGridProps, GridCore, type GridInstruction, type GridState, type HeaderData, type HeaderRendererParams, type KeyEventData, type LocalFilterCondition, type MutableDataSource, type NumberFilterCondition, type PointerEventData, type Row, type RowId, type SelectionState, type SlotData, type SortDirection, type SortModel, type TextFilterCondition, type UseFillHandleOptions, type UseFillHandleResult, type UseFilterConditionsResult, type UseFilterPopupOptions, type UseGpGridOptions, type UseGpGridResult, type UseInputHandlerOptions, type UseInputHandlerResult, type VueCellRenderer, type VueEditRenderer, type VueHeaderRenderer, buildCellClasses, calculateColumnPositions, createClientDataSource, createDataSourceFromArray, createInitialState, createMutableClientDataSource, createServerDataSource, findColumnAtX, getCellValue, getTotalWidth, gridStyles, injectStyles, isCellActive, isCellEditing, isCellInFillPreview, isCellSelected, isRowVisible, renderCell, renderEditCell, renderHeader, useAutoScroll, useFillHandle, useFilterConditions, useFilterPopup, useGpGrid, useGridState, useInputHandler };
|
|
1926
|
+
export { type CellDataType, type CellPosition, type CellRange, type CellRendererParams, type CellValue, type CellValueChangedEvent, type ColumnDefinition, type ColumnFilterModel, type ContainerBounds, type DataSource, type DataSourceRequest, type DataSourceResponse, type DateFilterCondition, type DragState, type EditRendererParams, type FilterCondition, type FilterModel, type FilterPopupState, _default as GpGrid, _default as default, type GpGridProps, GridCore, type GridInstruction, type GridState, type HeaderData, type HeaderRendererParams, type KeyEventData, type LocalFilterCondition, type MutableDataSource, type NumberFilterCondition, type PointerEventData, type Row, type RowId, type SelectionState, type SlotData, type SortDirection, type SortModel, type TextFilterCondition, type UseFillHandleOptions, type UseFillHandleResult, type UseFilterConditionsResult, type UseFilterPopupOptions, type UseGpGridOptions, type UseGpGridResult, type UseGridDataOptions, type UseGridDataResult, type UseInputHandlerOptions, type UseInputHandlerResult, type VueCellRenderer, type VueEditRenderer, type VueHeaderRenderer, buildCellClasses, calculateColumnPositions, createClientDataSource, createDataSourceFromArray, createInitialState, createMutableClientDataSource, createServerDataSource, findColumnAtX, getCellValue, getTotalWidth, gridStyles, injectStyles, isCellActive, isCellEditing, isCellInFillPreview, isCellSelected, isRowVisible, renderCell, renderEditCell, renderHeader, useAutoScroll, useFillHandle, useFilterConditions, useFilterPopup, useGpGrid, useGridData, useGridState, useInputHandler };
|
package/dist/index.js
CHANGED
|
@@ -1 +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 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(()=>l.highlighting,e=>{S.value?.highlight&&e&&S.value.highlight.updateOptions(e)}),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}),C(()=>e.highlighting,e=>{r.value?.highlight&&e&&r.value.highlight.updateOptions(e)});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};
|
|
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,createMutableClientDataSource as F,createServerDataSource as I,findColumnAtX as L,getTotalWidth as R,getTotalWidth as te,gridStyles as ne,injectStyles as re,injectStyles as ie,isCellActive as z,isCellActive as B,isCellEditing as ae,isCellEditing as V,isCellInFillPreview as H,isCellInFillPreview as oe,isCellSelected as se,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 ce(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 K(e){let t=h(G(e));function n(e){for(let n of e)ce(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 q(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 le(e,t){for(let n of e.values())if(n.rowIndex===t)return n;return null}function ue(e,t,n,r,i,a){let o=le(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 J(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}=q(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&&ue(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 Y(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 X(e){return e==null||e===``?o(``):typeof e==`string`?o(e):e}function Z(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 de(e){let{column:t,rowData:n,rowIndex:r,colIndex:i,isActive:a,isSelected:s,isEditing:c,cellRenderers:l,globalCellRenderer:u}=e,d=Z(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 X(e(f))}return u?X(u(f)):o(d==null?``:String(d))}function fe(e){return e==null||e===``?o(``):typeof e==`string`?o(e):e}function pe(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:Z(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 fe(e(d))}return u?fe(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 Q(e){return e==null||e===``?o(``):typeof e==`string`?o(e):e}function me(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 Q(e(m))}if(p)return Q(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:`M4 4h16l-6 8v5l-4 2v-7L4 4z`})])])),g.length>0&&h.push(l(`span`,{class:`gp-grid-header-icons`},g)),l(e,h)}function he(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 ge={class:`gp-grid-filter-content gp-grid-filter-text`},_e={key:0,class:`gp-grid-filter-mode-toggle`},ve={key:1,class:`gp-grid-filter-info`},ye={class:`gp-grid-filter-actions`},be=[`disabled`],xe={class:`gp-grid-filter-list`},Se={key:0,class:`gp-grid-filter-option`},Ce=[`checked`],we=[`checked`,`onChange`],Te={key:0,class:`gp-grid-filter-combination`},Ee=[`onClick`],De=[`onClick`],Oe={class:`gp-grid-filter-row`},ke=[`value`,`autofocus`,`onChange`],Ae=[`value`],je=[`value`,`onInput`],Me=[`onClick`];var Ne=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`,ge,[r(` Mode toggle - only show if not too many values `),p.value?r(`v-if`,!0):(m(),i(`div`,_e,[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`,ve,` 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`,ye,[a(`button`,{type:`button`,disabled:N.value,onClick:P},` Select All `,8,be),a(`button`,{type:`button`,onClick:F},` Deselect All `)]),r(` Checkbox list `),a(`div`,xe,[r(` Blanks option `),M.value?(m(),i(`label`,Se,[a(`input`,{type:`checkbox`,checked:E.value,onChange:n[3]||=e=>E.value=!E.value},null,40,Ce),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,we),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`,Te,[a(`button`,{type:`button`,class:u({active:x(D)[n-1]?.nextOperator===`and`}),onClick:e=>x(O)(n-1,{nextOperator:`and`})},` AND `,10,Ee),a(`button`,{type:`button`,class:u({active:x(D)[n-1]?.nextOperator===`or`}),onClick:e=>x(O)(n-1,{nextOperator:`or`})},` OR `,10,De)])):r(`v-if`,!0),a(`div`,Oe,[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,Ae)),64))],40,ke),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,je)):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,Me)):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 Pe={class:`gp-grid-filter-content gp-grid-filter-number`},Fe={key:0,class:`gp-grid-filter-combination`},Ie=[`onClick`],Le=[`onClick`],Re={class:`gp-grid-filter-row`},ze=[`value`,`onChange`],Be=[`value`],Ve=[`value`,`onInput`],He=[`value`,`onInput`],Ue=[`onClick`];var We=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`,Pe,[(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`,Fe,[a(`button`,{type:`button`,class:u({active:x(d)[o-1]?.nextOperator===`and`}),onClick:e=>x(p)(o-1,{nextOperator:`and`})},` AND `,10,Ie),a(`button`,{type:`button`,class:u({active:x(d)[o-1]?.nextOperator===`or`}),onClick:e=>x(p)(o-1,{nextOperator:`or`})},` OR `,10,Le)])):r(`v-if`,!0),a(`div`,Re,[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,Be)),64))],40,ze),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,Ve)):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,He)],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,Ue)):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 Ge={class:`gp-grid-filter-content gp-grid-filter-date`},Ke={key:0,class:`gp-grid-filter-combination`},qe=[`onClick`],Je=[`onClick`],Ye={class:`gp-grid-filter-row`},Xe=[`value`,`onChange`],Ze=[`value`],Qe=[`value`,`onInput`],$e=[`value`,`onInput`],et=[`onClick`];var tt=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`,Ge,[(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`,Ke,[a(`button`,{type:`button`,class:u({active:x(f)[o-1]?.nextOperator===`and`}),onClick:e=>x(h)(o-1,{nextOperator:`and`})},` AND `,10,qe),a(`button`,{type:`button`,class:u({active:x(f)[o-1]?.nextOperator===`or`}),onClick:e=>x(h)(o-1,{nextOperator:`or`})},` OR `,10,Je)])):r(`v-if`,!0),a(`div`,Ye,[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,Ze)),64))],40,Xe),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,Qe)):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,$e)],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,et)):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 nt={class:`gp-grid-filter-header`};var rt=c({__name:`FilterPopup`,props:{column:{},colIndex:{},anchorRect:{},distinctValues:{},currentFilter:{}},emits:[`apply`,`close`],setup(o,{emit:c}){let l=o,u=c,f=g(null);he(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`,nt,` Filter: `+b(o.column.headerName??o.column.field),1),r(` Number filter `),y.value?(m(),n(We,{key:0,"current-filter":o.currentFilter,onApply:h,onClose:_},null,8,[`current-filter`])):x.value?(m(),i(e,{key:1},[r(` Date filter `),s(tt,{"current-filter":o.currentFilter,onApply:h,onClose:_},null,8,[`current-filter`])],2112)):(m(),i(e,{key:2},[r(` Text filter (default) `),s(Ne,{"distinct-values":o.distinctValues,"current-filter":o.currentFilter,onApply:h,onClose:_},null,8,[`distinct-values`,`current-filter`])],2112))],4))}});const it=[`data-col-index`,`onClick`],at=[`onMousedown`,`onDblclick`,`onMouseenter`],ot={key:1,class:`gp-grid-loading`},st={key:2,class:`gp-grid-error`},ct={key:3,class:`gp-grid-empty`};var lt=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:{},getRowId:{},onCellValueChanged:{},loadingComponent:{}},setup(o,{expose:s}){ie();let c=o,l=g(null),h=y(null),S=y(null),w=y(null),{state:T,applyInstructions:D,reset:O}=K({initialWidth:c.initialWidth,initialHeight:c.initialHeight}),A=t(()=>c.headerHeight??c.rowHeight),M=t(()=>c.columns.map((e,t)=>({column:e,originalIndex:t})).filter(({column:e})=>!e.hidden)),P=t(()=>k(M.value.map(e=>e.column),T.viewportWidth)),F=t(()=>P.value.positions),I=t(()=>P.value.widths),L=t(()=>te(F.value)),R=t(()=>Array.from(T.slots.values())),{handleCellMouseDown:ne,handleCellDoubleClick:re,handleFillHandleMouseDown:z,handleHeaderClick:ae,handleKeyDown:H,handleWheel:se,dragState:W}=J(h,l,t(()=>c.columns),{activeCell:t(()=>T.activeCell),selectionRange:t(()=>T.selectionRange),editingCell:t(()=>T.editingCell),filterPopupOpen:t(()=>T.filterPopup?.isOpen??!1),rowHeight:c.rowHeight,headerHeight:A.value,columnPositions:F,visibleColumnsWithIndices:M,slots:t(()=>T.slots)}),{fillHandlePosition:G}=Y({activeCell:t(()=>T.activeCell),selectionRange:t(()=>T.selectionRange),slots:t(()=>T.slots),columns:t(()=>c.columns),visibleColumnsWithIndices:M,columnPositions:F,columnWidths:I,rowHeight:c.rowHeight});function ce(){let e=l.value,t=h.value;!e||!t||t.setViewport(e.scrollTop,e.scrollLeft,e.clientWidth,e.clientHeight)}function q(e,t){let n=h.value;n&&n.setFilter(e,t)}function le(){let e=h.value;e&&e.closeFilterPopup()}function ue(e,t){h.value?.input.handleCellMouseEnter(e,t)}function X(){h.value?.input.handleCellMouseLeave()}function Z(e){return[`gp-grid-row`,...h.value?.highlight?.computeRowClasses(e.rowIndex,e.rowData)??[]].filter(Boolean).join(` `)}function fe(e,t,n,r,i){let a=V(e,t,T.editingCell);return[ee(B(e,t,T.activeCell),U(e,t,T.selectionRange),a,oe(e,t,W.value.dragType===`fill`,W.value.fillSourceRange,W.value.fillTarget)),...h.value?.highlight?.computeCombinedCellClasses(e,t,n,r)??[]].filter(Boolean).join(` `)}function Q(){return c.dataSource??(c.rowData?N(c.rowData):j([]))}function he(e){w.value&&=(w.value(),null),h.value&&h.value.destroy();let t=new E({columns:c.columns,dataSource:e,rowHeight:c.rowHeight,headerHeight:A.value,overscan:c.overscan,sortingEnabled:c.sortingEnabled,highlighting:c.highlighting,getRowId:c.getRowId,onCellValueChanged:c.onCellValueChanged?e=>c.onCellValueChanged?.(e):void 0});h.value=t,w.value=t.onBatchInstruction(e=>{D(e)}),t.initialize();let n=l.value;n&&t.setViewport(n.scrollTop,n.scrollLeft,n.clientWidth,n.clientHeight)}return f(()=>{let e=Q();S.value=e,he(e);let t=l.value;if(t&&typeof ResizeObserver<`u`){let e=new ResizeObserver(()=>{h.value?.setViewport(t.scrollTop,t.scrollLeft,t.clientWidth,t.clientHeight)});e.observe(t),p(()=>{e.disconnect()})}p(()=>{w.value&&=(w.value(),null),h.value&&=(h.value.destroy(),null),S.value&&=(S.value.destroy?.(),null)})}),C([()=>c.dataSource,()=>c.rowData],()=>{c.rowData&&c.rowData.length>1e4&&S.value&&console.warn(`[gp-grid] rowData prop changed with ${c.rowData.length} rows — this triggers a full rebuild. Use useGridData() for efficient updates.`);let e=Q(),t=S.value;t&&t!==e?(t.destroy?.(),S.value=e,h.value?.setDataSource(e)):t||(S.value=e)}),C(()=>c.dataSource,e=>{if(e){let t=e;if(t.subscribe){let e=t.subscribe(()=>{h.value?.refreshFromTransaction()});p(()=>e())}}},{immediate:!0}),C(()=>c.highlighting,e=>{h.value?.highlight&&e&&h.value.highlight.updateOptions(e)}),s({core:h}),(t,s)=>(m(),i(`div`,{ref_key:`containerRef`,ref:l,class:u([`gp-grid-container`,{"gp-grid-container--dark":o.darkMode}]),style:{width:`100%`,height:`100%`,overflow:`auto`,position:`relative`},tabindex:`0`,onScroll:ce,onWheel:s[1]||=e=>x(se)(e,o.wheelDampening),onKeydown:s[2]||=(...e)=>x(H)&&x(H)(...e)},[r(` Content sizer `),a(`div`,{style:d({width:`${Math.max(x(T).contentWidth,L.value)}px`,height:`${Math.max(x(T).contentHeight,A.value)}px`,position:`relative`,minWidth:`100%`})},[r(` Headers `),a(`div`,{class:u([`gp-grid-header`,{"gp-grid-header--loading":x(T).isLoading}]),style:d({position:`sticky`,top:0,left:0,height:`${A.value}px`,width:`${Math.max(x(T).contentWidth,L.value)}px`,minWidth:`100%`})},[(m(!0),i(e,null,_(M.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:`${F.value[r]}px`,top:0,width:`${I.value[r]}px`,height:`${A.value}px`,background:`transparent`}),onClick:e=>x(ae)(t,e)},[(m(),n(v(x(me)({column:e,colIndex:t,sortDirection:x(T).headers.get(t)?.sortDirection,sortIndex:x(T).headers.get(t)?.sortIndex,sortable:x(T).headers.get(t)?.sortable??!0,filterable:x(T).headers.get(t)?.filterable??!0,hasFilter:x(T).headers.get(t)?.hasFilter??!1,core:h.value,container:l.value,headerRenderers:o.headerRenderers??{},globalHeaderRenderer:o.headerRenderer}))))],12,it))),128))],6),r(` Row slots `),(m(!0),i(e,null,_(R.value.filter(e=>e.rowIndex>=0),t=>(m(),i(`div`,{key:t.slotId,class:u(Z(t)),style:d({position:`absolute`,top:0,left:0,transform:`translateY(${t.translateY}px)`,width:`${Math.max(x(T).contentWidth,L.value)}px`,height:`${o.rowHeight}px`})},[(m(!0),i(e,null,_(M.value,({column:a,originalIndex:s},c)=>(m(),i(`div`,{key:`${t.slotId}-${s}`,class:u(fe(t.rowIndex,s,a,t.rowData,x(T).hoverPosition)),style:d({position:`absolute`,left:`${F.value[c]}px`,top:0,width:`${I.value[c]}px`,height:`${o.rowHeight}px`}),onMousedown:e=>x(ne)(t.rowIndex,s,e),onDblclick:()=>x(re)(t.rowIndex,s),onMouseenter:()=>ue(t.rowIndex,s),onMouseleave:X},[r(` Edit mode `),x(V)(t.rowIndex,s,x(T).editingCell)&&x(T).editingCell?(m(),n(v(x(pe)({column:a,rowData:t.rowData,rowIndex:t.rowIndex,colIndex:s,initialValue:x(T).editingCell.initialValue,core:h.value,editRenderers:o.editRenderers??{},globalEditRenderer:o.editRenderer})),{key:0})):(m(),i(e,{key:1},[r(` View mode `),(m(),n(v(x(de)({column:a,rowData:t.rowData,rowIndex:t.rowIndex,colIndex:s,isActive:x(B)(t.rowIndex,s,x(T).activeCell),isSelected:x(U)(t.rowIndex,s,x(T).selectionRange),isEditing:!1,cellRenderers:o.cellRenderers??{},globalCellRenderer:o.cellRenderer}))))],64))],46,at))),128))],6))),128)),r(` Fill handle `),x(G)&&!x(T).editingCell?(m(),i(`div`,{key:0,class:`gp-grid-fill-handle`,style:d({position:`absolute`,top:`${x(G).top}px`,left:`${x(G).left}px`,zIndex:200}),onMousedown:s[0]||=(...e)=>x(z)&&x(z)(...e)},null,36)):r(`v-if`,!0),r(` Loading overlay with indicator `),x(T).isLoading?(m(),i(e,{key:1},[s[4]||=a(`div`,{class:`gp-grid-loading-overlay`},null,-1),c.loadingComponent?(m(),n(v(c.loadingComponent),{key:0,"is-loading":!0})):(m(),i(`div`,ot,[...s[3]||=[a(`div`,{class:`gp-grid-loading-spinner`},null,-1)]]))],64)):r(`v-if`,!0),r(` Error message `),x(T).error?(m(),i(`div`,st,` Error: `+b(x(T).error),1)):r(`v-if`,!0),r(` Empty state `),!x(T).isLoading&&!x(T).error&&x(T).totalRows===0?(m(),i(`div`,ct,` No data to display `)):r(`v-if`,!0)],4),r(` Filter Popup `),x(T).filterPopup?.isOpen&&x(T).filterPopup.column&&x(T).filterPopup.anchorRect?(m(),n(rt,{key:0,column:x(T).filterPopup.column,"col-index":x(T).filterPopup.colIndex,"anchor-rect":x(T).filterPopup.anchorRect,"distinct-values":x(T).filterPopup.distinctValues,"current-filter":x(T).filterPopup.currentFilter,onApply:q,onClose:le},null,8,[`column`,`col-index`,`anchor-rect`,`distinct-values`,`current-filter`])):r(`v-if`,!0)],34))}});function ut(e){ie();let n=g(null),r=g(null),{state:i,applyInstructions:a}=K(),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(()=>te(l.value)),m=t(()=>Array.from(i.slots.values())),{handleCellMouseDown:h,handleCellDoubleClick:_,handleFillHandleMouseDown:v,handleHeaderClick:y,handleKeyDown:b,handleWheel:x,dragState:S}=J(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,getRowId:e.getRowId,onCellValueChanged:e.onCellValueChanged?t=>e.onCellValueChanged?.(t):void 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}),C(()=>e.highlighting,e=>{r.value?.highlight&&e&&r.value.highlight.updateOptions(e)});let{fillHandlePosition:M}=Y({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:oe,buildCellClasses:ee}}const dt=(e,t)=>{let n=F(e,{getRowId:t.getRowId,debounceMs:t.debounceMs,useWorker:t.useWorker,parallelSort:t.parallelSort});return p(()=>{n.clear()}),{dataSource:n,updateRow:n.updateRow,addRows:n.addRows,removeRows:n.removeRows,updateCell:n.updateCell,clear:n.clear,getRowById:n.getRowById,getTotalRowCount:n.getTotalRowCount,flushTransactions:n.flushTransactions}};export{lt as GpGrid,lt as default,T as GridCore,D as buildCellClasses,O as calculateColumnPositions,A as createClientDataSource,M as createDataSourceFromArray,G as createInitialState,P as createMutableClientDataSource,I as createServerDataSource,L as findColumnAtX,Z as getCellValue,R as getTotalWidth,ne as gridStyles,re as injectStyles,z as isCellActive,ae as isCellEditing,H as isCellInFillPreview,se as isCellSelected,W as isRowVisible,de as renderCell,pe as renderEditCell,me as renderHeader,q as useAutoScroll,Y as useFillHandle,$ as useFilterConditions,he as useFilterPopup,ut as useGpGrid,dt as useGridData,K as useGridState,J as useInputHandler};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gp-grid/vue",
|
|
3
3
|
"description": "A high-performance Vue 3 data grid component with virtual scrolling, cell selection, sorting, filtering, and Excel-like editing",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.8.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "dist/index.js",
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"nuxt3"
|
|
44
44
|
],
|
|
45
45
|
"dependencies": {
|
|
46
|
-
"@gp-grid/core": "0.
|
|
46
|
+
"@gp-grid/core": "0.8.0"
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|
|
49
49
|
"vue": "^3.4.0"
|