gp-grid-core 0.2.0 → 0.2.1

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.
Files changed (2) hide show
  1. package/dist/index.d.ts +7 -7
  2. package/package.json +1 -1
package/dist/index.d.ts CHANGED
@@ -1450,25 +1450,25 @@ declare function getSharedSortWorker(): SortWorkerManager;
1450
1450
  declare function terminateSharedSortWorker(): void;
1451
1451
  //#endregion
1452
1452
  //#region src/styles/variables.d.ts
1453
- declare const variablesStyles = "\n/* =============================================================================\n GP Grid - CSS Variables for Theming\n ============================================================================= */\n\n.gp-grid-container {\n /* Colors - Light Mode (default) */\n --gp-grid-bg: #ffffff;\n --gp-grid-bg-alt: #f8f9fa;\n --gp-grid-text: #212529;\n --gp-grid-text-secondary: #6c757d;\n --gp-grid-text-muted: #adb5bd;\n --gp-grid-border: #dee2e6;\n --gp-grid-border-light: #e9ecef;\n\n /* Header */\n --gp-grid-header-bg: #f1f3f5;\n --gp-grid-header-text: #212529;\n\n /* Selection */\n --gp-grid-primary: #228be6;\n --gp-grid-primary-light: #e7f5ff;\n --gp-grid-primary-border: #74c0fc;\n --gp-grid-hover: #f1f3f5;\n\n /* Filter */\n --gp-grid-filter-bg: #f8f9fa;\n --gp-grid-input-bg: #ffffff;\n --gp-grid-input-border: #ced4da;\n\n /* Error */\n --gp-grid-error-bg: #fff5f5;\n --gp-grid-error-text: #c92a2a;\n\n /* Loading */\n --gp-grid-loading-bg: rgba(255, 255, 255, 0.95);\n --gp-grid-loading-text: #495057;\n\n /* Scrollbar */\n --gp-grid-scrollbar-track: #f1f3f5;\n --gp-grid-scrollbar-thumb: #ced4da;\n --gp-grid-scrollbar-thumb-hover: #adb5bd;\n}\n\n/* Dark Mode */\n.gp-grid-container--dark {\n --gp-grid-bg: #1a1b1e;\n --gp-grid-bg-alt: #25262b;\n --gp-grid-text: #c1c2c5;\n --gp-grid-text-secondary: #909296;\n --gp-grid-text-muted: #5c5f66;\n --gp-grid-border: #373a40;\n --gp-grid-border-light: #2c2e33;\n\n /* Header */\n --gp-grid-header-bg: #25262b;\n --gp-grid-header-text: #c1c2c5;\n\n /* Selection */\n --gp-grid-primary: #339af0;\n --gp-grid-primary-light: #1c3d5a;\n --gp-grid-primary-border: #1c7ed6;\n --gp-grid-hover: #2c2e33;\n\n /* Filter */\n --gp-grid-filter-bg: #25262b;\n --gp-grid-input-bg: #1a1b1e;\n --gp-grid-input-border: #373a40;\n\n /* Error */\n --gp-grid-error-bg: #2c1a1a;\n --gp-grid-error-text: #ff6b6b;\n\n /* Loading */\n --gp-grid-loading-bg: rgba(26, 27, 30, 0.95);\n --gp-grid-loading-text: #c1c2c5;\n\n /* Scrollbar */\n --gp-grid-scrollbar-track: #25262b;\n --gp-grid-scrollbar-thumb: #373a40;\n --gp-grid-scrollbar-thumb-hover: #4a4d52;\n}\n";
1453
+ declare const variablesStyles: string;
1454
1454
  //#endregion
1455
1455
  //#region src/styles/container.d.ts
1456
- declare const containerStyles = "\n/* =============================================================================\n GP Grid - Clean Flat Design\n ============================================================================= */\n\n/* Grid Container */\n.gp-grid-container {\n outline: none;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n font-size: 13px;\n line-height: 1.5;\n color: var(--gp-grid-text);\n background-color: var(--gp-grid-bg);\n border: 1px solid var(--gp-grid-border);\n border-radius: 6px;\n user-select: none;\n -webkit-user-select: none;\n}\n\n.gp-grid-container:focus {\n outline: none;\n border-color: var(--gp-grid-primary);\n}\n";
1456
+ declare const containerStyles: string;
1457
1457
  //#endregion
1458
1458
  //#region src/styles/header.d.ts
1459
- declare const headerStyles = "\n/* =============================================================================\n Header\n ============================================================================= */\n\n.gp-grid-header {\n position: sticky;\n top: 0;\n left: 0;\n z-index: 100;\n background-color: var(--gp-grid-header-bg);\n border-bottom: 1px solid var(--gp-grid-border);\n}\n\n.gp-grid-container .gp-grid-header-cell {\n position: absolute;\n box-sizing: border-box;\n border-right: 1px solid var(--gp-grid-border);\n font-weight: 600;\n font-size: 12px;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n color: var(--gp-grid-header-text);\n cursor: pointer;\n user-select: none;\n display: flex;\n align-items: center;\n padding: 0 12px;\n background-color: transparent;\n transition: background-color 0.1s ease;\n}\n\n.gp-grid-container .gp-grid-header-cell:hover {\n background-color: var(--gp-grid-hover);\n}\n\n.gp-grid-container .gp-grid-header-cell:active {\n background-color: var(--gp-grid-border-light);\n}\n\n.gp-grid-container .gp-grid-header-text {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--gp-grid-header-text);\n}\n\n/* Header icons container */\n.gp-grid-header-icons {\n display: flex;\n align-items: center;\n gap: 4px;\n margin-left: auto;\n}\n\n/* Stacked sort arrows */\n.gp-grid-sort-arrows {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 2px;\n margin-left: 6px;\n}\n\n.gp-grid-sort-arrows-stack {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 2px;\n}\n\n.gp-grid-sort-arrow-up,\n.gp-grid-sort-arrow-down {\n opacity: 0.35;\n transition: opacity 0.15s ease, color 0.15s ease;\n color: var(--gp-grid-text);\n}\n\n.gp-grid-sort-arrow-up.active,\n.gp-grid-sort-arrow-down.active {\n opacity: 1;\n color: var(--gp-grid-primary);\n}\n\n.gp-grid-sort-index {\n font-size: 9px;\n color: var(--gp-grid-primary);\n font-weight: 600;\n}\n\n/* Filter icon */\n.gp-grid-filter-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n border-radius: 4px;\n cursor: pointer;\n color: var(--gp-grid-text-secondary);\n transition: background-color 0.15s ease, color 0.15s ease;\n margin-left: 2px;\n}\n\n.gp-grid-filter-icon:hover {\n background-color: var(--gp-grid-hover);\n color: var(--gp-grid-primary);\n}\n\n.gp-grid-filter-icon.active {\n color: var(--gp-grid-primary);\n background-color: var(--gp-grid-primary-light);\n}\n";
1459
+ declare const headerStyles: string;
1460
1460
  //#endregion
1461
1461
  //#region src/styles/cells.d.ts
1462
- declare const cellStyles = "\n/* =============================================================================\n Data Cells\n ============================================================================= */\n\n.gp-grid-row {\n position: absolute;\n top: 0;\n left: 0;\n}\n\n.gp-grid-cell {\n position: absolute;\n top: 0;\n box-sizing: border-box;\n padding: 0 12px;\n display: flex;\n align-items: center;\n cursor: cell;\n color: var(--gp-grid-text);\n border-right: 1px solid var(--gp-grid-border-light);\n border-bottom: 1px solid var(--gp-grid-border-light);\n background-color: var(--gp-grid-bg);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n user-select: none;\n -webkit-user-select: none;\n}\n\n/* Alternating row colors */\n.gp-grid-row--even .gp-grid-cell {\n background-color: var(--gp-grid-bg-alt);\n}\n\n.gp-grid-cell:hover {\n background-color: var(--gp-grid-hover) !important;\n}\n\n/* Active cell (focused) */\n.gp-grid-cell--active {\n background-color: var(--gp-grid-primary-light) !important;\n border: 2px solid var(--gp-grid-primary) !important;\n outline: none;\n z-index: 5;\n padding: 0 11px;\n}\n\n/* Selected cells (range selection) */\n.gp-grid-cell--selected {\n background-color: var(--gp-grid-primary-light) !important;\n}\n\n/* Editing cell */\n.gp-grid-cell--editing {\n background-color: var(--gp-grid-bg) !important;\n border: 2px solid var(--gp-grid-primary) !important;\n padding: 0 !important;\n z-index: 10;\n}\n\n/* =============================================================================\n Fill Handle (drag to fill)\n ============================================================================= */\n\n.gp-grid-fill-handle {\n position: absolute;\n width: 8px;\n height: 8px;\n background-color: var(--gp-grid-primary);\n border: 2px solid var(--gp-grid-bg);\n cursor: crosshair;\n z-index: 100;\n pointer-events: auto;\n box-sizing: border-box;\n border-radius: 1px;\n}\n\n.gp-grid-fill-handle:hover {\n transform: scale(1.2);\n}\n\n/* Fill preview (cells being filled) */\n.gp-grid-cell--fill-preview {\n background-color: var(--gp-grid-primary-light) !important;\n border: 1px dashed var(--gp-grid-primary) !important;\n}\n\n/* =============================================================================\n Edit Input\n ============================================================================= */\n\n.gp-grid-edit-input {\n width: 100%;\n height: 100%;\n padding: 0 11px;\n font-family: inherit;\n font-size: inherit;\n color: var(--gp-grid-text);\n border: none;\n background-color: transparent;\n}\n\n.gp-grid-edit-input:focus {\n outline: none;\n}\n";
1462
+ declare const cellStyles: string;
1463
1463
  //#endregion
1464
1464
  //#region src/styles/states.d.ts
1465
- declare const statesStyles = "\n/* =============================================================================\n Loading & Error States\n ============================================================================= */\n\n.gp-grid-loading {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n padding: 12px 20px;\n background-color: var(--gp-grid-loading-bg);\n color: var(--gp-grid-loading-text);\n border-radius: 6px;\n border: 1px solid var(--gp-grid-border);\n font-weight: 500;\n font-size: 13px;\n z-index: 1000;\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.gp-grid-loading-spinner {\n width: 16px;\n height: 16px;\n border: 2px solid var(--gp-grid-border);\n border-top-color: var(--gp-grid-primary);\n border-radius: 50%;\n animation: gp-grid-spin 0.7s linear infinite;\n}\n\n@keyframes gp-grid-spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n.gp-grid-error {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n padding: 12px 20px;\n background-color: var(--gp-grid-error-bg);\n color: var(--gp-grid-error-text);\n border-radius: 6px;\n border: 1px solid var(--gp-grid-error-text);\n font-weight: 500;\n font-size: 13px;\n z-index: 1000;\n max-width: 80%;\n text-align: center;\n}\n\n/* =============================================================================\n Empty State\n ============================================================================= */\n\n.gp-grid-empty {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n color: var(--gp-grid-text-muted);\n font-size: 14px;\n text-align: center;\n}\n";
1465
+ declare const statesStyles: string;
1466
1466
  //#endregion
1467
1467
  //#region src/styles/scrollbar.d.ts
1468
- declare const scrollbarStyles = "\n/* =============================================================================\n Scrollbar Styling\n ============================================================================= */\n\n.gp-grid-container::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n}\n\n.gp-grid-container::-webkit-scrollbar-track {\n background-color: var(--gp-grid-scrollbar-track);\n}\n\n.gp-grid-container::-webkit-scrollbar-thumb {\n background-color: var(--gp-grid-scrollbar-thumb);\n border-radius: 4px;\n}\n\n.gp-grid-container::-webkit-scrollbar-thumb:hover {\n background-color: var(--gp-grid-scrollbar-thumb-hover);\n}\n\n.gp-grid-container::-webkit-scrollbar-corner {\n background-color: var(--gp-grid-scrollbar-track);\n}\n";
1468
+ declare const scrollbarStyles: string;
1469
1469
  //#endregion
1470
1470
  //#region src/styles/filters.d.ts
1471
- declare const filtersStyles = "\n/* =============================================================================\n Filter Popup\n ============================================================================= */\n\n.gp-grid-filter-popup {\n background-color: var(--gp-grid-bg);\n border: 1px solid var(--gp-grid-border);\n border-radius: 6px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n max-height: 400px;\n display: flex;\n flex-direction: column;\n font-size: 13px;\n}\n\n.gp-grid-filter-header {\n padding: 10px 12px;\n font-weight: 600;\n border-bottom: 1px solid var(--gp-grid-border-light);\n color: var(--gp-grid-header-text);\n}\n\n.gp-grid-filter-content {\n padding: 10px 12px;\n display: flex;\n flex-direction: column;\n gap: 10px;\n overflow: hidden;\n}\n\n/* Mode toggle (Values / Condition) */\n.gp-grid-filter-mode-toggle {\n display: flex;\n gap: 4px;\n background-color: var(--gp-grid-bg-alt);\n border-radius: 4px;\n padding: 2px;\n}\n\n.gp-grid-filter-mode-toggle button {\n flex: 1;\n padding: 6px 10px;\n font-size: 11px;\n font-family: inherit;\n border: none;\n border-radius: 3px;\n background-color: transparent;\n color: var(--gp-grid-text-secondary);\n cursor: pointer;\n transition: background-color 0.15s ease, color 0.15s ease;\n}\n\n.gp-grid-filter-mode-toggle button:hover {\n color: var(--gp-grid-text);\n}\n\n.gp-grid-filter-mode-toggle button.active {\n background-color: var(--gp-grid-bg);\n color: var(--gp-grid-text);\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n}\n\n/* Info message for too many values */\n.gp-grid-filter-info {\n font-size: 11px;\n color: var(--gp-grid-text-secondary);\n padding: 6px 8px;\n background-color: var(--gp-grid-bg-alt);\n border-radius: 4px;\n}\n\n/* Search input in filter */\n.gp-grid-filter-search {\n width: 100%;\n height: 30px;\n padding: 0 10px;\n font-family: inherit;\n font-size: 12px;\n border: 1px solid var(--gp-grid-input-border);\n border-radius: 4px;\n background-color: var(--gp-grid-input-bg);\n color: var(--gp-grid-text);\n box-sizing: border-box;\n}\n\n.gp-grid-filter-search:focus {\n outline: none;\n border-color: var(--gp-grid-primary);\n}\n\n/* Select All / Deselect All actions */\n.gp-grid-filter-actions {\n display: flex;\n gap: 8px;\n}\n\n.gp-grid-filter-actions button {\n flex: 1;\n padding: 4px 8px;\n font-size: 11px;\n font-family: inherit;\n border: 1px solid var(--gp-grid-input-border);\n border-radius: 3px;\n background-color: var(--gp-grid-bg);\n color: var(--gp-grid-text);\n cursor: pointer;\n}\n\n.gp-grid-filter-actions button:hover:not(:disabled) {\n background-color: var(--gp-grid-hover);\n}\n\n.gp-grid-filter-actions button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n/* Checkbox list */\n.gp-grid-filter-list {\n max-height: 200px;\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n gap: 4px;\n border: 1px solid var(--gp-grid-border-light);\n border-radius: 4px;\n padding: 6px;\n}\n\n.gp-grid-filter-option {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 4px 6px;\n border-radius: 3px;\n cursor: pointer;\n}\n\n.gp-grid-filter-option:hover {\n background-color: var(--gp-grid-hover);\n}\n\n.gp-grid-filter-option input[type=\"checkbox\"] {\n margin: 0;\n cursor: pointer;\n}\n\n.gp-grid-filter-option span {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.gp-grid-filter-blank {\n font-style: italic;\n color: var(--gp-grid-text-muted);\n}\n\n/* Filter condition row (for number/date filters) */\n.gp-grid-filter-condition {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.gp-grid-filter-row {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.gp-grid-filter-row select {\n height: 30px;\n padding: 0 6px;\n font-family: inherit;\n font-size: 12px;\n border: 1px solid var(--gp-grid-input-border);\n border-radius: 4px;\n background-color: var(--gp-grid-input-bg);\n color: var(--gp-grid-text);\n cursor: pointer;\n}\n\n.gp-grid-filter-row input[type=\"number\"],\n.gp-grid-filter-row input[type=\"date\"],\n.gp-grid-filter-row input[type=\"text\"],\n.gp-grid-filter-text-input {\n flex: 1;\n height: 30px;\n padding: 0 8px;\n font-family: inherit;\n font-size: 12px;\n border: 1px solid var(--gp-grid-input-border);\n border-radius: 4px;\n background-color: var(--gp-grid-input-bg);\n color: var(--gp-grid-text);\n min-width: 0;\n box-sizing: border-box;\n}\n\n.gp-grid-filter-row input:focus {\n outline: none;\n border-color: var(--gp-grid-primary);\n}\n\n.gp-grid-filter-to {\n font-size: 11px;\n color: var(--gp-grid-text-secondary);\n}\n\n.gp-grid-filter-remove {\n width: 24px;\n height: 24px;\n padding: 0;\n font-size: 16px;\n line-height: 1;\n border: none;\n border-radius: 3px;\n background-color: transparent;\n color: var(--gp-grid-text-muted);\n cursor: pointer;\n}\n\n.gp-grid-filter-remove:hover {\n background-color: var(--gp-grid-error-bg);\n color: var(--gp-grid-error-text);\n}\n\n/* AND/OR combination toggle */\n.gp-grid-filter-combination {\n display: flex;\n gap: 4px;\n margin-bottom: 4px;\n}\n\n.gp-grid-filter-combination button {\n flex: 1;\n padding: 4px 8px;\n font-size: 10px;\n font-family: inherit;\n border: 1px solid var(--gp-grid-input-border);\n border-radius: 3px;\n background-color: var(--gp-grid-bg);\n color: var(--gp-grid-text-secondary);\n cursor: pointer;\n}\n\n.gp-grid-filter-combination button.active {\n background-color: var(--gp-grid-primary);\n border-color: var(--gp-grid-primary);\n color: #fff;\n}\n\n/* Add condition button */\n.gp-grid-filter-add {\n width: 100%;\n padding: 6px;\n font-size: 11px;\n font-family: inherit;\n border: 1px dashed var(--gp-grid-border);\n border-radius: 4px;\n background-color: transparent;\n color: var(--gp-grid-text-secondary);\n cursor: pointer;\n}\n\n.gp-grid-filter-add:hover {\n background-color: var(--gp-grid-hover);\n border-color: var(--gp-grid-primary);\n color: var(--gp-grid-primary);\n}\n\n/* Apply / Clear buttons */\n.gp-grid-filter-buttons {\n display: flex;\n gap: 8px;\n padding-top: 8px;\n border-top: 1px solid var(--gp-grid-border-light);\n}\n\n.gp-grid-filter-btn-clear,\n.gp-grid-filter-btn-apply {\n flex: 1;\n padding: 8px 12px;\n font-size: 12px;\n font-family: inherit;\n border-radius: 4px;\n cursor: pointer;\n}\n\n.gp-grid-filter-btn-clear {\n border: 1px solid var(--gp-grid-input-border);\n background-color: var(--gp-grid-bg);\n color: var(--gp-grid-text);\n}\n\n.gp-grid-filter-btn-clear:hover {\n background-color: var(--gp-grid-hover);\n}\n\n.gp-grid-filter-btn-apply {\n border: 1px solid var(--gp-grid-primary);\n background-color: var(--gp-grid-primary);\n color: #fff;\n}\n\n.gp-grid-filter-btn-apply:hover {\n opacity: 0.9;\n}\n";
1471
+ declare const filtersStyles: string;
1472
1472
  //#endregion
1473
1473
  //#region src/styles/index.d.ts
1474
1474
  /**
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "gp-grid-core",
3
3
  "description": "A high-performance, framework-agnostic TypeScript data grid core with virtual scrolling",
4
4
  "private": false,
5
- "version": "0.2.0",
5
+ "version": "0.2.1",
6
6
  "license": "Apache-2.0",
7
7
  "main": "dist/index.js",
8
8
  "types": "dist/index.d.ts",