gridjs-spreadsheet 26.6.2 → 26.7.1

package/shared.d.ts

@@ -0,0 +1,66 @@
+import type Spreadsheet from 'gridjs-spreadsheet';
+
+export interface GridJsEndpoints {
+  updateCell: string;
+  imageUrl: string;
+  addImage: string;
+  addImageByUrl: string;
+  copyImage: string;
+  download: string;
+  ole: string;
+  lazyLoading: string;
+}
+
+export interface GridJsAdapterCallbacks {
+  ready?: (instance: Spreadsheet, adapter: GridJsAdapter) => void;
+  change?: (...args: any[]) => void;
+  error?: (payload: any) => void;
+  cellSelected?: (...args: any[]) => void;
+  cellEdited?: (...args: any[]) => void;
+  sheetSelected?: (...args: any[]) => void;
+  sheetLoaded?: (...args: any[]) => void;
+}
+
+export interface GridJsAdapterDependencies {
+  globalObject?: any;
+  jszip?: any;
+  importJSZip?: () => Promise<any>;
+  importGridJs?: () => Promise<any>;
+}
+
+export interface GridJsAdapterConfig {
+  container: HTMLElement;
+  apiBase?: string;
+  endpoints?: Partial<GridJsEndpoints>;
+  data?: any;
+  loader?: () => Promise<any> | any;
+  mode?: 'edit' | 'read';
+  locale?: string;
+  local?: string;
+  token?: string;
+  height?: string | number;
+  showToolbar?: boolean;
+  showContextmenu?: boolean;
+  updateMode?: string;
+  loadingGif?: string;
+  activeSheetName?: string;
+  uniqueid?: string;
+  fileName?: string;
+  basicZorder?: number;
+  view?: Record<string, any>;
+  callbacks?: GridJsAdapterCallbacks;
+  dependencies?: GridJsAdapterDependencies;
+}
+
+export interface GridJsAdapter {
+  instance: Spreadsheet;
+  payload: any;
+  endpoints: GridJsEndpoints;
+  refreshToken(token: string): void;
+  getData(): any;
+  getUpdateDatas(): any;
+  destroy(): void;
+}
+
+export function makeGridJsEndpoints(apiBase?: string): GridJsEndpoints;
+export function createGridJsAdapter(config: GridJsAdapterConfig): Promise<GridJsAdapter>;

package/shared.js

@@ -0,0 +1,204 @@
+const DEFAULT_Z_ORDER = 5678;
+
+function trimTrailingSlash(value) {
+  return String(value || '').replace(/\/+$/, '');
+}
+
+function joinEndpoint(apiBase, path) {
+  const normalizedBase = trimTrailingSlash(apiBase);
+  return `${normalizedBase}${path}`;
+}
+
+export function makeGridJsEndpoints(apiBase = '') {
+  return {
+    updateCell: joinEndpoint(apiBase, '/GridJs2/UpdateCell'),
+    imageUrl: joinEndpoint(apiBase, '/GridJs2/ImageUrl'),
+    addImage: joinEndpoint(apiBase, '/GridJs2/AddImage'),
+    addImageByUrl: joinEndpoint(apiBase, '/GridJs2/AddImageByURL'),
+    copyImage: joinEndpoint(apiBase, '/GridJs2/CopyImage'),
+    download: joinEndpoint(apiBase, '/GridJs2/Download'),
+    ole: joinEndpoint(apiBase, '/GridJs2/Ole'),
+    lazyLoading: joinEndpoint(apiBase, '/GridJs2/LazyLoadingStreamJson'),
+  };
+}
+
+function getBrowserGlobal(explicitGlobal) {
+  if (explicitGlobal) return explicitGlobal;
+  if (typeof window !== 'undefined') return window;
+  return globalThis;
+}
+
+async function resolveImportedDependency(importer) {
+  const mod = await importer();
+  return mod.default || mod;
+}
+
+async function resolveDependency({
+  provided,
+  importer,
+  globalObject,
+  globalNames,
+  moduleName,
+}) {
+  if (provided) return provided;
+  if (importer) return resolveImportedDependency(importer);
+
+  for (const globalName of globalNames) {
+    if (globalObject[globalName]) return globalObject[globalName];
+  }
+
+  throw new Error(`GridJS wrapper requires ${moduleName}. Pass it through dependencies or expose it on window.`);
+}
+
+async function ensureRuntimeDependencies(dependencies = {}) {
+  const globalObject = getBrowserGlobal(dependencies.globalObject);
+  const jszip = await resolveDependency({
+    provided: dependencies.jszip,
+    importer: dependencies.importJSZip,
+    globalObject,
+    globalNames: ['JSZip'],
+    moduleName: 'jszip',
+  });
+
+  globalObject.JSZip = jszip;
+
+  return { globalObject, jszip };
+}
+
+async function loadGridJs(dependencies = {}) {
+  if (dependencies.importGridJs) {
+    return dependencies.importGridJs();
+  }
+
+  const globalObject = getBrowserGlobal(dependencies.globalObject);
+  if (globalObject['gridjs-spreadsheet']) {
+    return globalObject['gridjs-spreadsheet'];
+  }
+  if (globalObject.x_spreadsheet) {
+    return { default: globalObject.x_spreadsheet };
+  }
+
+  throw new Error('GridJS wrapper requires gridjs-spreadsheet. Pass dependencies.importGridJs or load the UMD script first.');
+}
+
+async function resolveGridJsPayload({ data, loader }) {
+  if (data) return data;
+  if (typeof loader === 'function') return loader();
+  throw new Error('GridJS wrapper requires either data or loader.');
+}
+
+function getSheets(payload) {
+  if (!payload) return [];
+  if (Array.isArray(payload)) return payload;
+  return payload.data || [];
+}
+
+function callIfPresent(target, methodName, ...args) {
+  if (target && typeof target[methodName] === 'function') {
+    target[methodName](...args);
+  }
+}
+
+function bindEvent(instance, eventName, callback) {
+  if (typeof callback === 'function' && instance && typeof instance.on === 'function') {
+    instance.on(eventName, callback);
+  }
+}
+
+function buildSpreadsheetOptions(config, endpoints) {
+  const lang = config.locale || config.local || 'en';
+
+  return {
+    updateMode: config.updateMode || 'server',
+    updateUrl: endpoints.updateCell,
+    showToolbar: config.showToolbar !== false,
+    showContextmenu: config.showContextmenu !== false,
+    mode: config.mode || 'edit',
+    local: lang,
+    locale: lang,
+    ...(config.token ? { token: config.token } : {}),
+    ...(config.loadingGif ? { loadingGif: config.loadingGif } : {}),
+    ...(config.view ? { view: config.view } : {}),
+  };
+}
+
+export async function createGridJsAdapter(config) {
+  if (!config || !config.container) {
+    throw new Error('GridJS wrapper requires a container element.');
+  }
+
+  const callbacks = config.callbacks || {};
+  const endpoints = {
+    ...makeGridJsEndpoints(config.apiBase),
+    ...(config.endpoints || {}),
+  };
+  const payload = await resolveGridJsPayload(config);
+  await ensureRuntimeDependencies(config.dependencies);
+
+  const gridJsModule = await loadGridJs(config.dependencies);
+  const Spreadsheet = gridJsModule.default || gridJsModule.Spreadsheet || gridJsModule;
+  const options = buildSpreadsheetOptions(config, endpoints);
+  const instance = new Spreadsheet(config.container, options);
+  let destroyed = false;
+
+  instance.loadData(getSheets(payload), config.activeSheetName || payload?.actname);
+  callIfPresent(instance, 'setUniqueId', payload?.uniqueid || config.uniqueid || '');
+  callIfPresent(instance, 'setFileName', payload?.filename || config.fileName || '');
+  callIfPresent(
+    instance,
+    'setImageInfo',
+    endpoints.imageUrl,
+    endpoints.addImage,
+    endpoints.addImageByUrl,
+    endpoints.copyImage,
+    config.basicZorder || DEFAULT_Z_ORDER,
+    config.loadingGif,
+  );
+  callIfPresent(instance, 'setFileDownloadInfo', endpoints.download);
+  callIfPresent(instance, 'setOleDownloadInfo', endpoints.ole);
+  callIfPresent(instance, 'setLazyLoadingUrl', endpoints.lazyLoading);
+
+  if (typeof callbacks.change === 'function' && typeof instance.change === 'function') {
+    instance.change(callbacks.change);
+  }
+  if (typeof callbacks.error === 'function') {
+    callIfPresent(instance, 'updateServerError', (xhr, textStatus, errorThrown) => {
+      callbacks.error({ type: 'updateServerError', xhr, textStatus, errorThrown });
+    });
+    callIfPresent(instance, 'updateCellError', (message) => {
+      callbacks.error({ type: 'updateCellError', message });
+    });
+  }
+
+  bindEvent(instance, 'cell-selected', callbacks.cellSelected);
+  bindEvent(instance, 'cell-edited', callbacks.cellEdited);
+  bindEvent(instance, 'sheet-selected', callbacks.sheetSelected);
+  bindEvent(instance, 'sheet-loaded', callbacks.sheetLoaded);
+
+  const adapter = {
+    instance,
+    payload,
+    endpoints,
+    refreshToken(token) {
+      callIfPresent(instance, 'refreshToken', token);
+    },
+    getData() {
+      return typeof instance.getData === 'function' ? instance.getData() : null;
+    },
+    getUpdateDatas() {
+      return typeof instance.getUpdateDatas === 'function' ? instance.getUpdateDatas() : null;
+    },
+    destroy() {
+      if (destroyed) return;
+      destroyed = true;
+      callIfPresent(instance, 'destroy');
+      config.container.innerHTML = '';
+    },
+  };
+
+  if (typeof callbacks.ready === 'function') {
+    callbacks.ready(instance, adapter);
+  }
+
+  return adapter;
+}

package/vue.d.ts

@@ -0,0 +1,20 @@
+import type { DefineComponent } from 'vue';
+import type Spreadsheet from 'gridjs-spreadsheet';
+import type { GridJsAdapter } from './shared';
+
+export interface GridJsSpreadsheetProps {
+  apiBase?: string;
+  data?: any;
+  loader?: () => Promise<any> | any;
+  mode?: 'edit' | 'read';
+  locale?: string;
+  token?: string;
+  height?: string | number;
+  showToolbar?: boolean;
+  showContextmenu?: boolean;
+}
+
+export declare const GridJsSpreadsheet: DefineComponent<GridJsSpreadsheetProps, {}, any>;
+export default GridJsSpreadsheet;
+
+export type GridJsReadyHandler = (instance: Spreadsheet, adapter: GridJsAdapter) => void;

package/vue.js

@@ -0,0 +1,125 @@
+import { defineComponent, h, onBeforeUnmount, onMounted, ref, toRaw, watch } from 'vue';
+import { createGridJsAdapter } from './shared.js';
+
+function clonePlain(value) {
+  const rawValue = toRaw(value);
+  if (typeof structuredClone === 'function') {
+    try {
+      return structuredClone(rawValue);
+    } catch {
+      // Vue props can contain reactive proxies. Fall back to JSON cloning after
+      // unwrapping the top-level proxy.
+    }
+  }
+  return JSON.parse(JSON.stringify(rawValue));
+}
+
+function importGridJs() {
+  return import('gridjs-spreadsheet');
+}
+
+export const GridJsSpreadsheet = defineComponent({
+  name: 'GridJsSpreadsheet',
+  props: {
+    apiBase: { type: String, default: '' },
+    data: { type: Object, default: null },
+    loader: { type: Function, default: null },
+    mode: { type: String, default: 'edit' },
+    locale: { type: String, default: 'en' },
+    token: { type: String, default: '' },
+    height: { type: [String, Number], default: 'calc(100vh - 96px)' },
+    showToolbar: { type: Boolean, default: true },
+    showContextmenu: { type: Boolean, default: true },
+  },
+  emits: [
+    'ready',
+    'change',
+    'error',
+    'cell-selected',
+    'cell-edited',
+    'sheet-selected',
+    'sheet-loaded',
+  ],
+  setup(props, { emit }) {
+    const host = ref(null);
+    let adapter = null;
+
+    async function mountGridJs() {
+      if (!host.value || (!props.data && !props.loader)) return;
+      adapter?.destroy();
+      host.value.innerHTML = '';
+
+      adapter = await createGridJsAdapter({
+        container: host.value,
+        apiBase: props.apiBase,
+        data: props.data ? clonePlain(props.data) : undefined,
+        loader: props.loader,
+        mode: props.mode,
+        locale: props.locale,
+        token: props.token,
+        showToolbar: props.showToolbar,
+        showContextmenu: props.showContextmenu,
+        callbacks: {
+          ready: (instance, activeAdapter) => emit('ready', instance, activeAdapter),
+          change: (...args) => emit('change', ...args),
+          error: payload => emit('error', payload),
+          cellSelected: (...args) => emit('cell-selected', ...args),
+          cellEdited: (...args) => emit('cell-edited', ...args),
+          sheetSelected: (...args) => emit('sheet-selected', ...args),
+          sheetLoaded: (...args) => emit('sheet-loaded', ...args),
+        },
+        dependencies: {
+          importJSZip: () => import('jszip'),
+          importGridJs,
+        },
+      });
+    }
+
+    watch(
+      () => [
+        props.data?.uniqueid,
+        props.data?.filename,
+        props.apiBase,
+        props.mode,
+        props.locale,
+        props.showToolbar,
+        props.showContextmenu,
+      ],
+      () => {
+        mountGridJs().catch(error => emit('error', { type: 'mountError', error }));
+      },
+      { immediate: true },
+    );
+
+    watch(
+      () => props.token,
+      token => {
+        if (adapter && token) {
+          adapter.refreshToken(token);
+        }
+      },
+    );
+
+    onMounted(() => {
+      mountGridJs().catch(error => emit('error', { type: 'mountError', error }));
+    });
+
+    onBeforeUnmount(() => {
+      adapter?.destroy();
+      adapter = null;
+      if (host.value) host.value.innerHTML = '';
+    });
+
+    return () => h('div', {
+      ref: host,
+      class: 'gridjs-vue-host',
+      style: {
+        width: '100%',
+        height: props.height,
+        background: '#ffffff',
+      },
+    });
+  },
+});
+
+export default GridJsSpreadsheet;

package/xspreadsheet.css

@@ -46,6 +46,7 @@ body {
   box-shadow: 1px 1px 3px -1px rgba(0, 0, 0, 0.3);
 }
 .x-spreadsheet-comment-tip {
+  box-sizing: border-box;
   font-family: inherit;
   position: absolute;
   padding: 5px 10px;
@@ -53,6 +54,12 @@ body {
   border-radius: 1px;
   background: #ffffe1;
   font-size: 12px;
+  max-width: min(720px, calc(100vw - 16px));
+  max-height: min(420px, 45vh, calc(100vh - 16px));
+  overflow: auto;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
   z-index: 201;
 }
 .x-spreadsheet-comment-tip:before {