npm - gridjs-spreadsheet - Versions diffs - 26.6.1 → 26.7.0 - Mend

gridjs-spreadsheet 26.6.1 → 26.7.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.

Files changed (61) hide show

package/{a08275ef8caf83cc1c2eae91f17663e8.svg → 1f345d060b26fa53bc9d78c36441afd6.svg} +106 -26
package/angular.d.ts +67 -0
package/angular.js +174 -0
package/example/README.md +242 -41
package/example/angular-gridjs/.nvmrc +1 -0
package/example/angular-gridjs/angular.json +66 -0
package/example/angular-gridjs/package.json +31 -0
package/example/angular-gridjs/proxy.conf.json +12 -0
package/example/angular-gridjs/src/app/api.ts +7 -0
package/example/angular-gridjs/src/app/app.component.html +57 -0
package/example/angular-gridjs/src/app/app.component.ts +153 -0
package/example/angular-gridjs/src/app/routing.ts +52 -0
package/example/angular-gridjs/src/favicon.ico +0 -0
package/example/angular-gridjs/src/index.html +12 -0
package/example/angular-gridjs/src/main.ts +7 -0
package/example/angular-gridjs/src/styles.css +37 -0
package/example/angular-gridjs/tsconfig.app.json +9 -0
package/example/angular-gridjs/tsconfig.json +29 -0
package/example/pom.xml +3 -3
package/example/react-gridjs/index.html +12 -0
package/example/react-gridjs/package.json +20 -0
package/example/react-gridjs/src/App.jsx +188 -0
package/example/react-gridjs/src/api.js +7 -0
package/example/react-gridjs/src/main.jsx +9 -0
package/example/react-gridjs/src/routing.js +51 -0
package/example/react-gridjs/src/styles.css +37 -0
package/example/react-gridjs/vite.config.js +16 -0
package/example/src/main/java/com/aspose/gridjs/demo/controller/DataController.java +80 -2
package/example/src/main/java/com/aspose/gridjs/demo/controller/GridJs2Controller.java +12 -0
package/example/vanilla-gridjs/npm/index.html +29 -0
package/example/vanilla-gridjs/npm/main.js +8 -0
package/example/vanilla-gridjs/npm/package.json +16 -0
package/example/vanilla-gridjs/npm/vite.config.js +11 -0
package/example/vanilla-gridjs/script/index.html +32 -0
package/example/vanilla-gridjs/script/main.js +9 -0
package/example/vanilla-gridjs/script/package.json +12 -0
package/example/vanilla-gridjs/script/vite.config.js +11 -0
package/example/vanilla-gridjs/shared/demo-app.js +205 -0
package/example/vanilla-gridjs/shared/styles.css +36 -0
package/example/vue-gridjs/index.html +12 -0
package/example/vue-gridjs/package.json +19 -0
package/example/vue-gridjs/src/App.vue +199 -0
package/example/vue-gridjs/src/api.js +7 -0
package/example/vue-gridjs/src/main.js +9 -0
package/example/vue-gridjs/src/routing.js +51 -0
package/example/vue-gridjs/src/styles.css +37 -0
package/example/vue-gridjs/vite.config.js +21 -0
package/index.d.ts +528 -472
package/index.js +1 -1
package/package.json +143 -50
package/react.d.ts +27 -0
package/react.js +111 -0
package/readme.md +183 -380
package/shared.d.ts +66 -0
package/shared.js +204 -0
package/vue.d.ts +20 -0
package/vue.js +125 -0
package/xspreadsheet.css +365 -1
package/xspreadsheet.js +5 -5
package/example/.mvn/wrapper/maven-wrapper.properties +0 -18
package/example/src/test/java/com/aspose/gridjs/demo/GridjsdemoApplicationTests.java +0 -1441

package/example/vanilla-gridjs/npm/index.html ADDED Viewed

@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Use gridjs-spreadsheet from npm with Vanilla HTML and Java.">
+    <title>GridJS Vanilla npm demo</title>
+  </head>
+  <body>
+    <div id="start-page" class="demo-shell">
+      <header class="demo-navbar"><a href="https://docs.aspose.com/cells/java/aspose-cells-gridjs/">Aspose.Cells.GridJs Vanilla npm demo</a></header>
+      <main class="demo-container">
+        <h1 class="visually-hidden">GridJS Vanilla npm demo</h1>
+        <fieldset class="demo-selector">
+          <legend>Select a demo:</legend>
+          <label class="radio-card active"><input type="radio" name="demoType" value="permanent" checked><span>permanent url load demo</span></label>
+          <label class="radio-card"><input type="radio" name="demoType" value="highlight"><span>highlight and custom context menu demo</span></label>
+        </fieldset>
+        <section class="upload-block"><h2>Upload a local workbook</h2><input id="upload-input" type="file" accept=".xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"></section>
+        <section class="path-block"><h2>Workbook directory: <span id="directory"></span></h2><h2>Choose a workbook to open</h2></section>
+        <p id="status-message" class="status-message" role="status"></p>
+        <section id="file-list" class="file-list" aria-label="Workbook files"></section>
+      </main>
+      <footer class="demo-footer">© 2026 · <a href="https://products.aspose.com/cells/java">Aspose.Cells for Java</a></footer>
+    </div>
+    <main id="editor-page" class="editor-page" hidden><div id="editor-status" class="editor-status" role="status"></div><div id="grid-host"></div></main>
+    <script type="module" src="/main.js"></script>
+  </body>
+</html>

package/example/vanilla-gridjs/npm/main.js ADDED Viewed

@@ -0,0 +1,8 @@
+import xSpreadsheet from 'gridjs-spreadsheet';
+import JSZip from 'jszip';
+import 'gridjs-spreadsheet/xspreadsheet.css';
+import '../shared/styles.css';
+import { startGridJsDemo } from '../shared/demo-app.js';
+window.JSZip = JSZip;
+startGridJsDemo({ clientName: 'vanilla-npm', createSpreadsheet: xSpreadsheet });

package/example/vanilla-gridjs/npm/package.json ADDED Viewed

@@ -0,0 +1,16 @@
+{
+  "name": "gridjs-vanilla-npm-java-demo",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 127.0.0.1 --port 5175 --strictPort",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "gridjs-spreadsheet": "latest",
+    "jszip": "^3.10.1"
+  },
+  "devDependencies": {
+    "vite": "latest"
+  }
+}

package/example/vanilla-gridjs/npm/vite.config.js ADDED Viewed

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite';
+export default defineConfig({
+  server: {
+    fs: { allow: ['..'] },
+    proxy: {
+      '/GridJs2': 'http://127.0.0.1:8080',
+      '/gridjsdemo': 'http://127.0.0.1:8080',
+    },
+  },
+});

package/example/vanilla-gridjs/script/index.html ADDED Viewed

@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Use gridjs-spreadsheet directly with script tags and a Java backend.">
+    <title>GridJS Vanilla script demo</title>
+    <link rel="stylesheet" href="https://unpkg.com/gridjs-spreadsheet@latest/xspreadsheet.css">
+    <script src="https://unpkg.com/jszip@3.10.1/dist/jszip.min.js"></script>
+    <script src="https://unpkg.com/gridjs-spreadsheet@latest/xspreadsheet.js"></script>
+  </head>
+  <body>
+    <div id="start-page" class="demo-shell">
+      <header class="demo-navbar"><a href="https://docs.aspose.com/cells/java/aspose-cells-gridjs/">Aspose.Cells.GridJs direct script demo</a></header>
+      <main class="demo-container">
+        <h1 class="visually-hidden">GridJS Vanilla direct script demo</h1>
+        <fieldset class="demo-selector">
+          <legend>Select a demo:</legend>
+          <label class="radio-card active"><input type="radio" name="demoType" value="permanent" checked><span>permanent url load demo</span></label>
+          <label class="radio-card"><input type="radio" name="demoType" value="highlight"><span>highlight and custom context menu demo</span></label>
+        </fieldset>
+        <section class="upload-block"><h2>Upload a local workbook</h2><input id="upload-input" type="file" accept=".xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"></section>
+        <section class="path-block"><h2>Workbook directory: <span id="directory"></span></h2><h2>Choose a workbook to open</h2></section>
+        <p id="status-message" class="status-message" role="status"></p>
+        <section id="file-list" class="file-list" aria-label="Workbook files"></section>
+      </main>
+      <footer class="demo-footer">© 2026 · <a href="https://products.aspose.com/cells/java">Aspose.Cells for Java</a></footer>
+    </div>
+    <main id="editor-page" class="editor-page" hidden><div id="editor-status" class="editor-status" role="status"></div><div id="grid-host"></div></main>
+    <script type="module" src="/main.js"></script>
+  </body>
+</html>

package/example/vanilla-gridjs/script/main.js ADDED Viewed

@@ -0,0 +1,9 @@
+import { startGridJsDemo } from '../shared/demo-app.js';
+import '../shared/styles.css';
+if (typeof window.x_spreadsheet !== 'function') {
+  document.querySelector('#status-message').textContent = 'GridJS failed to load from the script URL.';
+  document.querySelector('#status-message').classList.add('status-error');
+} else {
+  startGridJsDemo({ clientName: 'vanilla-script', createSpreadsheet: window.x_spreadsheet });
+}

package/example/vanilla-gridjs/script/package.json ADDED Viewed

@@ -0,0 +1,12 @@
+{
+  "name": "gridjs-vanilla-script-java-demo",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 127.0.0.1 --port 5176 --strictPort",
+    "build": "vite build"
+  },
+  "devDependencies": {
+    "vite": "latest"
+  }
+}

package/example/vanilla-gridjs/script/vite.config.js ADDED Viewed

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite';
+export default defineConfig({
+  server: {
+    fs: { allow: ['..'] },
+    proxy: {
+      '/GridJs2': 'http://127.0.0.1:8080',
+      '/gridjsdemo': 'http://127.0.0.1:8080',
+    },
+  },
+});

package/example/vanilla-gridjs/shared/demo-app.js ADDED Viewed

@@ -0,0 +1,205 @@
+const DEMO_PERMANENT = 'permanent';
+const DEMO_HIGHLIGHT = 'highlight';
+async function fetchJson(url, options) {
+  const response = await fetch(url, options);
+  if (!response.ok) {
+    const message = await response.text();
+    throw new Error(message || `${response.status} ${response.statusText}`);
+  }
+  return response.json();
+}
+function normalizeUid(clientName, file) {
+  return `${clientName}-uid-${file.replace(/[^a-zA-Z0-9]/g, '-')}`;
+}
+function readRoute(clientName) {
+  const params = new URLSearchParams(window.location.search);
+  const file = params.get('file');
+  if (!file) return null;
+  const demo = params.get('demo') === DEMO_HIGHLIGHT ? DEMO_HIGHLIGHT : DEMO_PERMANENT;
+  return {
+    file,
+    storedFile: params.get('storedFile') || file,
+    demo,
+    uid: params.get('uid') || normalizeUid(clientName, file),
+    fromUpload: params.get('fromUpload') || '',
+  };
+}
+function pushRoute(workbook) {
+  const params = new URLSearchParams({ file: workbook.file, demo: workbook.demo });
+  if (workbook.storedFile && workbook.storedFile !== workbook.file) params.set('storedFile', workbook.storedFile);
+  if (workbook.demo === DEMO_PERMANENT || workbook.fromUpload) params.set('uid', workbook.uid);
+  if (workbook.fromUpload) params.set('fromUpload', workbook.fromUpload);
+  window.history.pushState(null, '', `/?${params}`);
+}
+function workbookEndpoint(workbook) {
+  const params = new URLSearchParams({ filename: workbook.storedFile || workbook.file });
+  if (workbook.fromUpload) {
+    params.set('uid', workbook.uid);
+    return `/GridJs2/DetailStreamJsonWithUidFromUpload?${params}`;
+  }
+  if (workbook.demo === DEMO_PERMANENT) {
+    params.set('uid', workbook.uid);
+    return `/GridJs2/DetailStreamJsonWithUid?${params}`;
+  }
+  return `/GridJs2/DetailStreamJson?${params}`;
+}
+export function startGridJsDemo({ clientName, createSpreadsheet }) {
+  const startPage = document.querySelector('#start-page');
+  const editorPage = document.querySelector('#editor-page');
+  const editorStatus = document.querySelector('#editor-status');
+  const status = document.querySelector('#status-message');
+  const directory = document.querySelector('#directory');
+  const fileList = document.querySelector('#file-list');
+  const uploadInput = document.querySelector('#upload-input');
+  let current = readRoute(clientName);
+  let spreadsheet = null;
+  const selectedDemo = () => document.querySelector('input[name="demoType"]:checked')?.value || DEMO_PERMANENT;
+  function setStatus(message, isError = false) {
+    status.textContent = message;
+    status.classList.toggle('status-error', isError);
+  }
+  function updateDemoSelection(demo) {
+    const input = document.querySelector(`input[name="demoType"][value="${demo}"]`);
+    if (input) input.checked = true;
+    document.querySelectorAll('.radio-card').forEach((label) => {
+      label.classList.toggle('active', label.contains(input));
+    });
+  }
+  async function loadFiles() {
+    setStatus('Loading workbook list...');
+    try {
+      const result = await fetchJson('/gridjsdemo/api/files');
+      directory.textContent = result.directory || '';
+      fileList.replaceChildren();
+      if (!result.files?.length) {
+        const empty = document.createElement('p');
+        empty.className = 'empty-message';
+        empty.textContent = 'No workbooks found in the configured directory.';
+        fileList.append(empty);
+      } else {
+        result.files.forEach((file) => {
+          const button = document.createElement('button');
+          button.type = 'button';
+          button.className = 'file-item';
+          button.textContent = file;
+          button.addEventListener('click', () => openWorkbook({
+            file,
+            storedFile: file,
+            demo: selectedDemo(),
+            uid: normalizeUid(clientName, file),
+            fromUpload: '',
+          }));
+          fileList.append(button);
+        });
+      }
+      setStatus('Ready');
+    } catch (error) {
+      setStatus(`Failed to load files: ${error.message}`, true);
+    }
+  }
+  async function mountWorkbook() {
+    if (!current) {
+      editorPage.hidden = true;
+      startPage.hidden = false;
+      return;
+    }
+    startPage.hidden = true;
+    editorPage.hidden = false;
+    editorStatus.hidden = false;
+    editorStatus.textContent = `Loading ${current.file}...`;
+    try {
+      const payload = await fetchJson(workbookEndpoint(current));
+      if (payload.Error) throw new Error(payload.Error);
+      payload.filename = current.file;
+      document.querySelector('#grid-host').replaceChildren();
+      const options = {
+        updateMode: 'server',
+        updateUrl: '/GridJs2/UpdateCell',
+        showToolbar: true,
+        showContextmenu: true,
+        mode: 'edit',
+        local: 'en',
+      };
+      spreadsheet = createSpreadsheet('#grid-host', options).loadData(payload.data, payload.actname);
+      spreadsheet.setUniqueId?.(payload.uniqueid);
+      spreadsheet.setFileName?.(current.file);
+      spreadsheet.setImageInfo?.(
+        '/GridJs2/ImageUrl',
+        '/GridJs2/AddImage',
+        '/GridJs2/AddImageByURL',
+        '/GridJs2/CopyImage',
+        5678,
+      );
+      spreadsheet.setFileDownloadInfo?.('/GridJs2/Download');
+      spreadsheet.setOleDownloadInfo?.('/GridJs2/Ole');
+      spreadsheet.setLazyLoadingUrl?.('/GridJs2/LazyLoadingStreamJson');
+      spreadsheet.setOpenFileUrl?.('/');
+      spreadsheet.setActiveSheetByName?.(payload.actname)?.setActiveCell?.(payload.actrow, payload.actcol);
+      spreadsheet.change?.((data) => console.log('[GridJS Event] changed', data));
+      spreadsheet.on?.('cell-selected', (_, row, column) => console.log('[GridJS Event] cell selected', row, column));
+      spreadsheet.on?.('sheet-selected', (_, name) => console.log('[GridJS Event] sheet selected', name));
+      spreadsheet.updateCellError?.((message) => console.error('[GridJS update error]', message));
+      editorStatus.hidden = true;
+    } catch (error) {
+      editorStatus.hidden = false;
+      editorStatus.textContent = `Workbook load failed: ${error.message}`;
+      editorStatus.classList.add('status-error');
+    }
+  }
+  function openWorkbook(workbook) {
+    current = workbook;
+    pushRoute(workbook);
+    void mountWorkbook();
+  }
+  document.querySelectorAll('input[name="demoType"]').forEach((input) => {
+    input.addEventListener('change', () => updateDemoSelection(input.value));
+  });
+  uploadInput.addEventListener('change', async () => {
+    const file = uploadInput.files?.[0];
+    if (!file) return;
+    const form = new FormData();
+    form.append('file', file);
+    form.append('client', clientName);
+    setStatus(`Uploading ${file.name}...`);
+    try {
+      const result = await fetchJson('/gridjsdemo/api/upload', { method: 'POST', body: form });
+      openWorkbook({
+        file: result.displayName || file.name,
+        storedFile: result.file,
+        demo: selectedDemo(),
+        uid: result.uid || normalizeUid(clientName, result.file),
+        fromUpload: '1',
+      });
+    } catch (error) {
+      setStatus(`Upload failed: ${error.message}`, true);
+    } finally {
+      uploadInput.value = '';
+    }
+  });
+  window.addEventListener('popstate', () => {
+    current = readRoute(clientName);
+    if (current) updateDemoSelection(current.demo);
+    void mountWorkbook();
+  });
+  updateDemoSelection(current?.demo || DEMO_PERMANENT);
+  void loadFiles();
+  void mountWorkbook();
+}

package/example/vanilla-gridjs/shared/styles.css ADDED Viewed

@@ -0,0 +1,36 @@
+:root { font-family: Arial, Helvetica, sans-serif; color: #212529; background: #f8f9fa; }
+* { box-sizing: border-box; }
+html, body { min-height: 100%; }
+body { margin: 0; overflow-y: hidden; background: #f8f9fa; font-size: 14px; }
+button, input { font: inherit; }
+[hidden] { display: none !important; }
+.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+.demo-shell { min-height: 100dvh; display: flex; flex-direction: column; background: #f8f9fa; }
+.demo-navbar { min-height: 48px; display: flex; align-items: center; justify-content: center; background: #fff; border-bottom: 1px solid #dee2e6; padding: 8px 12px; font-size: 19px; }
+.demo-navbar a, .demo-footer a { color: #0645ad; text-decoration: underline; }
+.demo-container { flex: 1; width: 100%; max-width: 960px; margin: 0 auto; padding: 20px 16px; }
+.demo-selector { border: 1px solid #adb5bd; border-radius: 6px; margin: 0 0 18px; padding: 18px 14px 14px; display: flex; align-items: center; }
+.demo-selector legend { width: auto; padding: 0 6px; font-weight: 600; }
+.radio-card { min-height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; margin-left: -1px; border: 1px solid #adb5bd; background: #f0f0f0; color: #343a40; cursor: pointer; transition: background-color 180ms ease, color 180ms ease; }
+.radio-card:first-of-type { margin-left: 0; border-radius: 5px 0 0 5px; }
+.radio-card:last-of-type { border-radius: 0 5px 5px 0; }
+.radio-card.active { background: #0b63ce; border-color: #0b63ce; color: #fff; z-index: 1; }
+.radio-card:focus-within, .file-item:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid rgba(11, 99, 206, .35); outline-offset: 2px; }
+.upload-block h2, .path-block h2 { margin: 0 0 10px; font-size: 14px; line-height: 1.4; }
+.upload-block input[type=file] { min-height: 44px; margin-bottom: 12px; }
+.path-block { margin-top: 4px; }
+.status-message { min-height: 20px; margin: 8px 0; color: #495057; }
+.status-error { color: #b42318 !important; }
+.file-list { min-height: 140px; max-height: 260px; overflow-y: auto; border: 1px solid #ced4da; border-radius: 6px; background: #f6f7ef; padding: 8px; }
+.file-item { display: block; width: 100%; min-height: 40px; border: 0; border-radius: 4px; padding: 8px; background: transparent; color: #0645ad; text-align: left; text-decoration: underline; cursor: pointer; }
+.file-item:hover { background: #e7eef8; }
+.empty-message { margin: 16px; color: #5f6b76; }
+.demo-footer { min-height: 44px; border-top: 1px solid #dee2e6; display: flex; align-items: center; justify-content: center; padding: 8px 12px; color: #495057; }
+.editor-page { height: 100dvh; width: 100vw; overflow: hidden; background: #fff; position: relative; }
+#grid-host { width: 100%; height: 100%; }
+.editor-status { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 24px; color: #5f6b76; background: #fff; }
+@media (max-width: 700px) {
+  body { overflow-y: auto; }
+  .demo-selector { flex-direction: column; align-items: stretch; }
+  .radio-card { margin-left: 0; width: 100%; border-radius: 5px !important; }
+}

package/example/vue-gridjs/index.html ADDED Viewed

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>GridJS Vue Demo</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

package/example/vue-gridjs/package.json ADDED Viewed

@@ -0,0 +1,19 @@
+{
+  "name": "gridjs-vue-java-demo",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 127.0.0.1 --port 5174 --strictPort",
+    "build": "vite build",
+    "preview": "vite preview --host 127.0.0.1 --port 6174 --strictPort"
+  },
+  "dependencies": {
+    "gridjs-spreadsheet": "latest",
+    "jszip": "^3.10.1",
+    "vue": "latest"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "latest",
+    "vite": "latest"
+  }
+}

package/example/vue-gridjs/src/App.vue ADDED Viewed

@@ -0,0 +1,199 @@
+<script setup>
+// Root demo component.
+// Renders either:
+//  - the start page (demo picker + sample file list + upload box), or
+//  - the full-page spreadsheet editor once a workbook has been selected.
+// Which one is shown is driven entirely by the URL (see ./routing.js).
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { GridJsSpreadsheet } from 'gridjs-spreadsheet/vue';
+import { DEMO_PERMANENT, DEMO_HIGHLIGHT, makeUid, readRoute, pushWorkbookRoute } from './routing';
+import { fetchJson } from './api';
+// Sample workbooks listed on the start page.
+const files = ref([]);
+const directory = ref('');
+// The workbook selected via the URL; null means "show the start page".
+const current = ref(readRoute());
+// Which demo mode is active (only relevant while on the start page).
+const demoType = ref(current.value?.demo || DEMO_PERMANENT);
+const workbookData = ref(null);
+const status = ref('Loading workbook list...');
+const hasWorkbook = computed(() => Boolean(current.value));
+// Forces the <GridJsSpreadsheet> to remount whenever a different workbook is loaded.
+const workbookKey = computed(() => (workbookData.value?.uniqueid || workbookData.value?.filename || '') + (current.value?.demo || ''));
+function logEvent(message) {
+  console.log('[GridJS Event]', message);
+}
+// Loads the list of sample workbooks available on the server.
+async function loadFiles() {
+  try {
+    const result = await fetchJson('/gridjsdemo/api/files');
+    files.value = result.files || [];
+    directory.value = result.directory || '';
+    status.value = 'Ready';
+  } catch (error) {
+    status.value = 'Failed to load files: ' + error.message;
+  }
+}
+// Navigates to a workbook: updates the URL and local state together.
+function openWorkbook(workbook) {
+  const normalized = { ...workbook, demo: workbook.demo || demoType.value };
+  pushWorkbookRoute(normalized);
+  current.value = normalized;
+  demoType.value = normalized.demo;
+}
+function openFile(file) {
+  openWorkbook({ file, storedFile: file, demo: demoType.value, uid: makeUid(file), fromUpload: '' });
+}
+// Fetches workbook data for the GridJsSpreadsheet component whenever `current`
+// changes. Which endpoint is used depends on the demo mode:
+//  - permanent: uid-based endpoint, backend caches parsed data per uid.
+//  - highlight: plain endpoint, re-parses the file on every load.
+async function loadWorkbook() {
+  if (!current.value?.file) {
+    workbookData.value = null;
+    return;
+  }
+  workbookData.value = null;
+  status.value = 'Loading ' + current.value.file + '...';
+  try {
+    const demo = current.value.demo || DEMO_PERMANENT;
+    const params = new URLSearchParams({
+      filename: current.value.storedFile || current.value.file,
+      fromUpload: current.value.fromUpload || '',
+    });
+    let endpoint = '/GridJs2/DetailStreamJson';
+    if (current.value.fromUpload) {
+      params.set('uid', current.value.uid || makeUid(current.value.file));
+      endpoint = '/GridJs2/DetailStreamJsonWithUidFromUpload';
+    } else if (demo === DEMO_PERMANENT) {
+      params.set('uid', current.value.uid || makeUid(current.value.file));
+      endpoint = '/GridJs2/DetailStreamJsonWithUid';
+    }
+    const payload = await fetchJson(endpoint + '?' + params);
+    workbookData.value = { ...payload, filename: current.value.file };
+    status.value = 'Loaded ' + current.value.file;
+  } catch (error) {
+    status.value = 'Workbook load failed: ' + error.message;
+  }
+}
+async function upload(event) {
+  const file = event.target.files?.[0];
+  if (!file) return;
+  const form = new FormData();
+  form.append('file', file);
+  form.append('client', 'vue');
+  status.value = 'Uploading ' + file.name + '...';
+  try {
+    const result = await fetchJson('/gridjsdemo/api/upload', { method: 'POST', body: form });
+    logEvent('uploaded ' + result.file);
+    // Newly uploaded files live under the server's uploads dir, flagged with fromUpload=1.
+    openWorkbook({
+      file: result.displayName || file.name,
+      storedFile: result.file,
+      demo: demoType.value,
+      uid: result.uid || makeUid(result.file),
+      fromUpload: '1',
+    });
+  } catch (error) {
+    status.value = 'Upload failed: ' + error.message;
+  } finally {
+    event.target.value = '';
+  }
+}
+// Restores the previously active sheet/cell (from the workbook data) once
+// the grid has mounted, and points the "open file" link back at the start page.
+function onReady(instance, adapter) {
+  instance.setActiveSheetByName?.(adapter.payload?.actname)?.setActiveCell?.(adapter.payload?.actrow, adapter.payload?.actcol);
+  instance.setOpenFileUrl?.('/');
+  logEvent('ready ' + (adapter.payload?.filename || current.value?.file));
+}
+function onError(payload) {
+  console.error('GridJS Vue mount error', payload);
+  logEvent('error ' + (payload?.error?.message || payload?.message || payload?.type || 'unknown'));
+}
+// Keeps state in sync when the user navigates with the browser's back/forward buttons.
+function onPopState() {
+  current.value = readRoute();
+  if (current.value?.demo) demoType.value = current.value.demo;
+}
+watch(current, loadWorkbook, { immediate: true });
+onMounted(() => {
+  loadFiles();
+  window.addEventListener('popstate', onPopState);
+});
+onBeforeUnmount(() => window.removeEventListener('popstate', onPopState));
+</script>
+<template>
+  <!-- A workbook is selected -> render the full-page spreadsheet editor. -->
+  <main v-if="hasWorkbook" class="editor-page">
+    <GridJsSpreadsheet
+      v-if="workbookData"
+      :key="workbookKey"
+      :data="workbookData"
+      height="100vh"
+      :show-toolbar="true"
+      :show-contextmenu="true"
+      @ready="onReady"
+      @change="logEvent('changed')"
+      @error="onError"
+      @cell-selected="(_, ri, ci) => logEvent('cell selected ' + ri + ',' + ci)"
+      @cell-edited="(text, ri, ci) => logEvent('cell edited ' + ri + ',' + ci)"
+      @sheet-selected="(_, name) => logEvent('sheet ' + name)"
+    />
+    <div v-else class="editor-loading">{{ status }}</div>
+  </main>
+  <!-- No workbook selected -> render the start page (demo picker + file list + upload). -->
+  <div v-else class="demo-shell">
+    <header class="demo-navbar">
+      <a href="https://docs.aspose.com/cells/java/aspose-cells-gridjs/">Aspose.Cells.GridJs demo for Java</a>
+    </header>
+    <main class="demo-container">
+      <fieldset class="demo-selector">
+        <legend>Select a demo:</legend>
+        <label :class="demoType === DEMO_PERMANENT ? 'radio-card active' : 'radio-card'">
+          <input type="radio" name="demoType" :checked="demoType === DEMO_PERMANENT" @change="demoType = DEMO_PERMANENT" />
+          <span>permanent url load demo</span>
+        </label>
+        <label :class="demoType === DEMO_HIGHLIGHT ? 'radio-card active' : 'radio-card'">
+          <input type="radio" name="demoType" :checked="demoType === DEMO_HIGHLIGHT" @change="demoType = DEMO_HIGHLIGHT" />
+          <span>highlight and custom context menu demo</span>
+        </label>
+      </fieldset>
+      <section class="upload-block">
+        <h4>Upload a local file to start show workbook</h4>
+        <input type="file" accept=".xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" @change="upload" />
+      </section>
+      <section class="path-block">
+        <h4>The specific file path : {{ directory }}</h4>
+        <h4>Navigate one of the below file to start show workbook</h4>
+      </section>
+      <p class="status-message" role="status">{{ status }}</p>
+      <section class="file-list" aria-label="Workbook files">
+        <p v-if="status === 'Ready' && files.length === 0" class="empty-message">No workbooks found in the configured directory.</p>
+        <a v-for="file in files" :href="'/?file=' + encodeURIComponent(file)" :key="file" class="file-item" @click.prevent="openFile(file)">
+          <em>{{ file }}</em>
+        </a>
+      </section>
+    </main>
+    <footer class="demo-footer">© 2026 - <a href="https://products.aspose.com/cells/java">Aspose.Cells for Java</a></footer>
+  </div>
+</template>

package/example/vue-gridjs/src/api.js ADDED Viewed

@@ -0,0 +1,7 @@
+// Small fetch() wrapper that turns non-2xx responses into thrown Errors,
+// so callers can just `await fetchJson(url)` and catch failures in one place.
+export async function fetchJson(url, options) {
+  const response = await fetch(url, options);
+  if (!response.ok) throw new Error(response.status + ' ' + response.statusText);
+  return response.json();
+}

package/example/vue-gridjs/src/main.js ADDED Viewed

@@ -0,0 +1,9 @@
+// Entry point: just mounts the <App> root component (see ./App.vue).
+// Shared route/API helpers live in ./routing.js and ./api.js so App.vue
+// stays focused on component state and markup.
+import { createApp } from 'vue';
+import 'gridjs-spreadsheet/xspreadsheet.css';
+import './styles.css';
+import App from './App.vue';
+createApp(App).mount('#app');