feat(formulas): create new Formula Editor plugin

AGENTS.md

@@ -28,6 +28,7 @@ Changes in `packages/` can affect every framework. Preserve backward compatibili
 - Unit tests use Vitest with `test/vitest.config.mts`.
 - E2E tests use Cypress with `test/cypress.config.ts`.
 - Cypress tests use `testIsolation: false`; preserve their execution order and inherited state.
+- The Vanilla demo is the default Cypress target. Start its Vite watch server first with `pnpm serve:vite` (or use an already-running Vanilla server), then run `pnpm cypress:ci --spec test/cypress/e2e/<example>.cy.ts` for a focused spec.
 - Framework demos provide headless Cypress CI scripts. Start the matching demo server first (`pnpm angular:serve`, `pnpm aurelia:serve`, `pnpm react:serve`, or `pnpm vue:serve`).
 - Run the corresponding root CI command: `pnpm angular:cypress:ci`, `pnpm aurelia:cypress:ci`, `pnpm react:cypress:ci`, or `pnpm vue:cypress:ci` (for example, `pnpm aurelia:cypress:ci`). These commands use each framework's Cypress config and are preferred for validating framework-specific E2E suites.
 - Add or update tests for behavior changes, especially in core packages.

demos/vanilla/package.json

@@ -19,6 +19,7 @@
     "@slickgrid-universal/composite-editor-component": "workspace:*",
     "@slickgrid-universal/custom-tooltip-plugin": "workspace:*",
     "@slickgrid-universal/excel-export": "workspace:*",
+    "@slickgrid-universal/formula-plugin": "workspace:*",
     "@slickgrid-universal/graphql": "workspace:*",
     "@slickgrid-universal/odata": "workspace:*",
     "@slickgrid-universal/pdf-export": "workspace:*",
@@ -42,4 +43,4 @@
     "typescript": "catalog:",
     "vite": "catalog:"
   }
-}
+}

demos/vanilla/src/app-routing.ts

@@ -44,6 +44,7 @@ import Example43 from './examples/example43.js';
 import Example44 from './examples/example44.js';
 import Example45 from './examples/example45.js';
 import Example46 from './examples/example46.js';
+import Example47 from './examples/example47.js';
 import Icons from './examples/icons.js';
 import type { RouterConfig } from './interfaces.js';
 
@@ -98,6 +99,7 @@ export class AppRouting {
       { route: 'example44', name: 'example44', view: './examples/example44.html', viewModel: Example44, title: 'Example44' },
       { route: 'example45', name: 'example45', view: './examples/example45.html', viewModel: Example45, title: 'Example45' },
       { route: 'example46', name: 'example46', view: './examples/example46.html', viewModel: Example46, title: 'Example46' },
+      { route: 'example47', name: 'example47', view: './examples/example47.html', viewModel: Example47, title: 'Example47' },
       { route: '', redirect: 'example01' },
       { route: '**', redirect: 'example01' },
     ];

demos/vanilla/src/app.html

@@ -87,6 +87,7 @@ <h4 class="is-size-4 has-text-white">Slickgrid-Universal</h4>
           <a class="navbar-item" onclick.trigger="loadRoute('example44')">Example44 - Variable Row Height (provider)</a>
           <a class="navbar-item" onclick.trigger="loadRoute('example45')">Example45 - Variable Row Height (metadata)</a>
           <a class="navbar-item" onclick.trigger="loadRoute('example46')">Example46 - RTL (Right-to-Left)</a>
+          <a class="navbar-item" onclick.trigger="loadRoute('example47')">Example47 - Formula Service</a>
         </div>
       </div>
     </div>

demos/vanilla/src/examples/example47.html

@@ -0,0 +1,92 @@
+<h3 class="title is-3">
+  Example 47 - Formula Service (MVP)
+  <span class="d-inline-flex">
+    <button class="button is-small" onclick.trigger="toggleDarkMode()" data-test="toggle-dark-mode">
+      <span class="mdi mdi-theme-light-dark"></span>
+      <span> Toggle Light/Dark</span>
+    </button>
+  </span>
+
+  <div class="subtitle code-link">
+    <span class="is-size-6">see</span>
+    <a
+      class="is-size-5"
+      target="_blank"
+      href="https://github.com/ghiscoding/slickgrid-universal/blob/master/demos/vanilla/src/examples/example47.ts"
+    >
+      <span class="mdi mdi-link-variant"></span> code
+    </a>
+  </div>
+</h3>
+
+<h5 class="title is-5 mb-2">
+  Use <code>allowFormula: true</code> columns with optional <code>FormulaService</code>, while keeping Excel export optional.
+</h5>
+<h6 class="is-6 mb-2 example-details">
+  This demo is based on Example23. It stores formulas in FormulaService (per rowId + columnId), and Excel Export migrates these formulas to
+  native Excel formulas when ungrouped. Group total rows still use <code>groupTotalsExcelExportOptions.valueParserCallback</code>.
+</h6>
+<h6 class="is-6 mb-2 example-details">
+  Excel-like UX: when editing any <code>allowFormula: true</code> column, headers are prefixed with Excel column letters (<code>A</code>,
+  <code>B</code>, ...).
+</h6>
+<h6 class="is-6 mb-4 example-details">
+  MVP note: formula editing is text-based and does not yet include token coloring, click-to-reference, or range composer UX.
+</h6>
+
+<section class="row mb-2">
+  <div class="mb-1">
+    <button class="button is-small" onclick.trigger="exportToExcel()" data-test="export-excel-btn">
+      <span class="mdi mdi-file-excel-outline color-success"></span>
+      <span>Export to Excel</span>
+    </button>
+    <button class="button is-small" onclick.trigger="exportToExcelPortable()" data-test="export-excel-portable-btn">
+      <span class="mdi mdi-file-excel-outline color-warning"></span>
+      <span>Export Portable Values</span>
+    </button>
+    <span>
+      <button class="button is-small" onclick.trigger="groupByTaxable()" data-test="group-by-btn">
+        <span>Group by Taxable</span>
+      </button>
+      <button class="button is-small" onclick.trigger="clearGrouping()" data-test="clear-grouping-btn">
+        <span>Clear grouping</span>
+      </button>
+      <button class="button is-small" onclick.trigger="loadDefaultFormulas()" data-test="reload-formulas-btn">
+        <span>Load Default Formulas</span>
+      </button>
+      <button class="button is-small" onclick.trigger="clearAllFormulas()" data-test="clear-formulas-btn">
+        <span>Clear Formula Store</span>
+      </button>
+    </span>
+    <span class="ml-4 text-bold">
+      Tax Rate (%):
+      <input type="number" value.bind="taxRate" class="is-narrow input is-small" step="0.25" data-test="taxrate" />
+      <button class="button is-small" onclick.trigger="updateTaxRate()" data-test="update-btn">Update</button>
+    </span>
+  </div>
+</section>
+
+<section class="row mb-2">
+  <div class="mb-1">
+    <b>Try formula input:</b>
+    edit any <em>Sub-Total</em>, <em>Taxes</em>, or <em>Total</em> cell and type for example
+    <code>=REF(COLUMN("price"),ROW("1"))*REF(COLUMN("qty"),ROW("1"))</code>
+  </div>
+</section>
+
+<section class="row mb-2">
+  <div class="mb-1">
+    <b>Compatibility note:</b>
+    workbook custom functions (for example <code>CUSTOMSUM(...)</code>) rely on modern Excel LAMBDA conventions. LibreOffice/OpenOffice
+    might show errors for these formulas. Use <em>Export Portable Values</em> when cross-suite compatibility is required.
+  </div>
+</section>
+
+<section class="row mb-3">
+  <div class="mb-1">
+    <b>Last Formula Event:</b>
+    <span>${lastFormulaEvent}</span>
+  </div>
+</section>
+
+<div class="grid47"></div>

demos/vanilla/src/examples/example47.scss

@@ -0,0 +1,43 @@
+.grid47 {
+  --example47-row-index-bg: #ececec;
+  --example47-row-index-color: inherit;
+  --example47-sub-total-color: rgb(33, 80, 115);
+  --example47-taxes-color: rgb(198, 89, 17);
+  --example47-total-color: rgb(0, 90, 158);
+  --slick-text-editor-background: #fff;
+  --slick-cell-selected-color: #fff;
+
+  .slick-row:not(.slick-group) > .cell-unselectable {
+    background: var(--example47-row-index-bg) !important;
+    color: var(--example47-row-index-color);
+    font-weight: bold;
+  }
+
+  .text-sub-total {
+    font-style: italic;
+    color: var(--example47-sub-total-color);
+  }
+
+  .text-taxes {
+    font-style: italic;
+    color: var(--example47-taxes-color);
+  }
+
+  .text-total {
+    font-weight: bold;
+    color: var(--example47-total-color);
+  }
+}
+
+body[data-theme='dark'] .grid47,
+.dark-mode .grid47,
+.slick-dark-mode .grid47 {
+  --example47-row-index-bg: #334155;
+  --example47-row-index-color: #e2e8f0;
+  --example47-sub-total-color: #93c5fd;
+  --example47-taxes-color: #fdba74;
+  --example47-total-color: #60a5fa;
+  --slick-text-editor-background: #111827;
+  --slick-cell-selected-color: #2c2c2c;
+  --slick-cell-selected-editable-color: #333333;
+}