gridjs-spreadsheet 26.6.1 → 26.7.0

package/example/vue-gridjs/src/routing.js

@@ -0,0 +1,51 @@
+// Route (URL query string) helpers shared by the demo.
+//
+// The demo encodes which workbook is open directly in the URL so a page
+// refresh or a shared link reopens the same file, e.g.:
+//   /?file=Sample.xlsx&demo=permanent&uid=uid-Sample-xlsx
+//   /?file=Sample.xlsx&demo=highlight&fromUpload=1
+//
+// demo:
+//   'permanent' - loads the workbook through the uid-based streaming endpoint;
+//                 the backend caches the parsed result under this uid.
+//   'highlight' - loads the workbook through the plain streaming endpoint,
+//                 used by the "highlight and custom context menu" demo.
+export const DEMO_PERMANENT = 'permanent';
+export const DEMO_HIGHLIGHT = 'highlight';
+const CLIENT_PREFIX = 'vue';
+
+// Turns a file name into a stable cache key,
+// e.g. "Sales Report.xlsx" -> "uid-Sales-Report-xlsx".
+export function makeUid(file) {
+  return CLIENT_PREFIX + '-uid-' + file.replace(/[^a-zA-Z0-9]/g, '-');
+}
+
+// Reads the currently selected workbook (if any) from the URL query string.
+// Returns null when no `file` param is present, i.e. the start page.
+export function readRoute() {
+  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') || makeUid(file),
+    fromUpload: params.get('fromUpload') || '',
+  };
+}
+
+// Pushes the given workbook selection into the URL (without a full page
+// reload) so the browser's back/forward buttons and page refresh keep working.
+export function pushWorkbookRoute(workbook) {
+  const params = new URLSearchParams({ file: workbook.file, demo: workbook.demo || DEMO_PERMANENT });
+  if (workbook.storedFile && workbook.storedFile !== workbook.file) {
+    params.set('storedFile', workbook.storedFile);
+  }
+  if ((workbook.demo || DEMO_PERMANENT) === DEMO_PERMANENT || workbook.fromUpload) {
+    params.set('uid', workbook.uid || makeUid(workbook.file));
+  }
+  if (workbook.fromUpload) params.set('fromUpload', workbook.fromUpload);
+  window.history.pushState(null, '', '/?' + params.toString());
+}

package/example/vue-gridjs/src/styles.css

@@ -0,0 +1,37 @@
+:root { font-family: Arial, Helvetica, sans-serif; color: #212529; background: #f8f9fa; }
+* { box-sizing: border-box; }
+html, body, #root, #app { min-height: 100%; }
+body { margin: 0; overflow-y: hidden; background: #f8f9fa; font-size: 14px; }
+button, input { font: inherit; }
+.demo-shell { min-height: 100dvh; display: flex; flex-direction: column; background: #f8f9fa; }
+.demo-navbar { min-height: 44px; display: flex; align-items: center; justify-content: center; background: #fff; border-bottom: 1px solid #dee2e6; box-shadow: 0 1px 3px rgba(0,0,0,.08); padding: 8px 12px; font-size: 19px; }
+.demo-navbar a { color: #0000ee; text-decoration: underline; }
+.demo-container { flex: 1; width: 100%; max-width: 960px; margin: 0 auto; padding: 16px 12px; }
+.demo-selector { border: 1px solid #adb5bd; border-radius: 4px; margin: 0 0 16px; padding: 18px 14px 14px; display: flex; align-items: center; }
+.demo-selector legend { width: auto; font-size: 14px; padding: 0 6px; }
+.radio-card { min-height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; margin-left: -1px; border: 1px solid #adb5bd; background: #f0f0f0; color: #444; font-size: 14px; cursor: pointer; position: relative; }
+.radio-card:first-of-type { margin-left: 0; border-radius: 4px 0 0 4px; }
+.radio-card:last-of-type { border-radius: 0 4px 4px 0; }
+.radio-card input { width: 14px; height: 14px; margin: 0; accent-color: #0d6efd; }
+.radio-card.active { background: #0d6efd; border-color: #0d6efd; color: #fff; z-index: 1; }
+.upload-block { margin-top: 8px; }
+.upload-block h4, .path-block h4 { margin: 0 0 10px; font-size: 14px; font-weight: bold; line-height: 1.3; }
+.upload-block input[type=file] { margin-bottom: 12px; font-size: 13px; }
+.path-block { margin-top: 4px; }
+.file-list { min-height: 140px; max-height: 220px; overflow-y: auto; border: 1px solid #ced4da; border-radius: 4px; background: #f6f7ef; padding: 10px 12px; }
+.file-item { display: block; margin-bottom: 10px; color: #0000ee; text-decoration: underline; font-size: 14px; font-style: italic; }
+.file-item:hover { text-decoration: underline; }
+.radio-card:focus-within, .file-item:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid rgba(13, 110, 253, .35); outline-offset: 2px; }
+.status-message { min-height: 20px; margin: 8px 0; color: #495057; }
+.empty-message { margin: 12px 4px; color: #64748b; }
+.demo-footer { min-height: 40px; border-top: 1px solid #dee2e6; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; font-size: 13px; color: #495057; background: #f8f9fa; }
+.demo-footer a { color: #0000ee; text-decoration: underline; }
+.editor-page { height: 100dvh; width: 100vw; overflow: hidden; background: #fff; }
+.editor-loading { height: 100vh; display: grid; place-items: center; color: #64748b; background: #fff; }
+.gridjs-react-host, .gridjs-vue-host, gridjs-spreadsheet { display: block; width: 100%; height: 100vh; }
+@media (max-width: 700px) {
+  body { overflow-y: auto; }
+  .demo-selector { flex-direction: column; align-items: stretch; }
+  .radio-card { margin-left: 0; width: 100%; }
+  .radio-card:first-of-type, .radio-card:last-of-type { border-radius: 4px; }
+}

package/example/vue-gridjs/vite.config.js

@@ -0,0 +1,21 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      vue: 'vue/dist/vue.esm-bundler.js'
+    }
+  },
+  server: {
+    proxy: {
+      '/GridJs2': 'http://127.0.0.1:8080',
+      '/gridjsdemo': 'http://127.0.0.1:8080'
+    }
+  },
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true
+  }
+});