gridjs-spreadsheet 26.4.5 → 26.5.0

package/example/pom.xml

@@ -17,7 +17,7 @@
 	</repositories>
 	<groupId>com.aspose.gridjs</groupId>
 	<artifactId>gridjsdemo</artifactId>
-	<version>26.4</version>
+	<version>26.5</version>
 	<name>gridjsdemo</name>
 	<description>GridJs Demo project for Spring Boot</description>
 	<properties>
@@ -51,12 +51,12 @@
 		 <dependency>  
   			<groupId>com.aspose</groupId>  
  			<artifactId>aspose-cells</artifactId>  
- 			<version>26.4</version> 
+ 			<version>26.5</version> 
  	    </dependency> 
         <dependency>  
   			<groupId>com.aspose</groupId>  
  			<artifactId>aspose-cells</artifactId>  
- 			<version>26.4</version> 
+ 			<version>26.5</version> 
  			<classifier>gridjs</classifier>  
  	    </dependency>
 	<!--	<dependency>

package/index.d.ts

@@ -41,6 +41,11 @@ declare module 'gridjs-spreadsheet' {
     redactionReasons?: string[];
     /** Default redaction color */
     redactionDefaultColor?: string;
+    /**
+     * Custom toolbar buttons injected before the "more" dropdown.
+     * Each item defines a tag, tooltip, icon, and onClick handler.
+     */
+    customToolbarButtons?: CustomToolbarButtonConfig[];
     /**
      * Custom callback for adding new redaction reason.
      * If provided, replaces the default modal dialog.
@@ -72,6 +77,7 @@ declare module 'gridjs-spreadsheet' {
   export type REDACTION_REASON_INSERTED = 'redactionReason-inserted';
   export type REDACTION_REASON_CLEARED = 'redactionReason-cleared';
   export type REDACTION_TRANSPARENCY_TOGGLED = 'redactionTransparency-toggled';
+  export type CUSTOM_BUTTON = 'custom-button';
   export type UPDATE_SERVER_ERROR = 'updateServerError';
   export type UPDATE_CELL_ERROR = 'updateCellError';
 
@@ -84,6 +90,64 @@ declare module 'gridjs-spreadsheet' {
     eci: number;
   }
 
+  /** Icon descriptor for a custom toolbar button (choose one form) */
+  export interface CustomToolbarButtonIcon {
+    /** Image URL used as background-image */
+    url?: string;
+    /** CSS class applied to the inner icon element (user supplies CSS) */
+    className?: string;
+    /** Raw HTML fragment, e.g. inline <svg>...</svg> */
+    html?: string;
+    /** Plain text / emoji, e.g. '��' */
+    text?: string;
+    /** Width in px when using `url` (default: 16) */
+    width?: number;
+    /** Height in px when using `url` (default: 16) */
+    height?: number;
+  }
+
+  /** Runtime instance of a custom toolbar button (passed to onClick and `custom-button` event) */
+  export interface CustomToolbarButton {
+    /** Unique tag identifier */
+    tag: string;
+    /** Tooltip text */
+    tip: string;
+    /** Reference to the owning Spreadsheet instance (injected by Toolbar) */
+    spreadsheet: Spreadsheet;
+    /** Original config passed in via Options.customToolbarButtons */
+    config: CustomToolbarButtonConfig;
+    /** Update the icon at runtime */
+    setIcon(iconConfig: CustomToolbarButtonIcon): void;
+    /** Update the tooltip text at runtime */
+    setTooltip(text: string): void;
+    /** Toggle active (highlighted) state */
+    setActive(active: boolean): void;
+    /** Toggle disabled state (click events suppressed) */
+    setDisabled(disabled: boolean): void;
+    /** Show the button */
+    show(): void;
+    /** Hide the button */
+    hide(): void;
+  }
+
+  /** Configuration for a single custom toolbar button */
+  export interface CustomToolbarButtonConfig {
+    /** Unique identifier; forwarded as the second argument of the `custom-button` change event */
+    tag: string;
+    /** Tooltip shown on hover */
+    tooltip?: string;
+    /** Icon descriptor (url / className / html / text) */
+    icon?: CustomToolbarButtonIcon;
+    /** Click handler; `button` is the CustomToolbarButton instance, `spreadsheet` is the Spreadsheet instance */
+    onClick?: (button: CustomToolbarButton, spreadsheet: Spreadsheet) => void;
+    /** Initial active state */
+    active?: boolean;
+    /** Initial disabled state */
+    disabled?: boolean;
+    /** Optional fixed button width in px */
+    width?: number;
+  }
+
   export interface RedactionData {
     id: string;
     originId?: string;
@@ -189,6 +253,10 @@ declare module 'gridjs-spreadsheet' {
       envt: REDACTION_TRANSPARENCY_TOGGLED,
       callback: (isTransparent: boolean) => void
     ): void;
+    (
+      envt: CUSTOM_BUTTON,
+      callback: (tag: string, button: CustomToolbarButton) => void
+    ): void;
     (
       envt: UPDATE_SERVER_ERROR,
       callback: (...args: any[]) => void
@@ -270,6 +338,8 @@ declare module 'gridjs-spreadsheet' {
 
   export default class Spreadsheet {
     constructor(container: string | HTMLElement, opts?: Options);
+    /** Build version string (injected at compile time) */
+    readonly version: string;
     on: SpreadsheetEventHandler;
     /**
      * retrieve cell
@@ -307,6 +377,50 @@ declare module 'gridjs-spreadsheet' {
      */
     deleteSheet(): void;
 
+    /**
+     * insert a redaction shape on a target shape/image
+     * @param reason redaction reason text
+     * @param color background color
+     * @param targetId target shape/image id
+     * @param sheetName sheet name, defaults to active sheet
+     */
+    insertRedactionForShape(reason: string, color: string, targetId: string, sheetName?: string): Promise<void>;
+
+    /**
+     * insert a redaction on a cell range
+     * @param reason redaction reason text
+     * @param color background color
+     * @param range cell range {sri, sci, eri, eci}
+     * @param sheetName sheet name, defaults to active sheet
+     */
+    insertRedactionForRange(reason: string, color: string, range: CellRange, sheetName?: string): Promise<void>;
+
+    /**
+     * remove a redaction by id
+     * @param id redaction id
+     * @param sheetName sheet name, defaults to active sheet
+     */
+    removeRedaction(id: string, sheetName?: string): Promise<void>;
+
+    /**
+     * sync redaction operations from history records
+     * @param historyOprArray array of operation history records
+     * @param isSyncToServer whether to sync to server
+     */
+    syncRedactionOprClient(historyOprArray: any[], isSyncToServer?: boolean): Promise<void>;
+
+    /**
+     * burn all redactions permanently
+     */
+    burnAllRedactions(): void;
+
+    /**
+     * clear all redaction shapes on a sheet or sheets array
+     * @param sheetNameOrArray sheet name, array of sheet names, or null for active sheet
+     * @param isSyncToServer whether to sync to server
+     */
+    clearRedactionClient(sheetNameOrArray?: string | string[] | null, isSyncToServer?: boolean): Promise<void>;
+
     /**
      * load data
      * @param json

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gridjs-spreadsheet",
-  "version": "26.4.5",
+  "version": "26.5.0",
   "description": "this is the client side script for GridJs which is a lightweight, scalable, and customizable toolkit that provides cross-platform web applications, enables convenient development for editing or viewing Excel/Spreadsheet files, offers simple deployment, and provides easy-to-use APIs based on JSON format.",
   "types": "index.d.ts",
   "main": "xspreadsheet.js",

package/readme.md

@@ -399,6 +399,10 @@ v26.4.3:
 
 - Add boundary check for redaction
 
+v26.5: 
+
+- Support add custom buttons in toolbar
+
 ## License
 
 MIT

package/xspreadsheet.css

@@ -919,6 +919,21 @@ body {
 .x-spreadsheet-toolbar .x-spreadsheet-toolbar-more {
   padding: 0 6px 6px;
   text-align: left;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 2px;
+}
+.x-spreadsheet-toolbar .x-spreadsheet-toolbar-more .x-spreadsheet-toolbar-btn {
+  display: inline-flex !important;
+  align-items: center;
+}
+.x-spreadsheet-toolbar .x-spreadsheet-toolbar-more .x-spreadsheet-dropdown {
+  width: auto !important;
+  max-width: 180px;
+}
+.x-spreadsheet-toolbar .x-spreadsheet-toolbar-more .x-spreadsheet-dropdown .x-spreadsheet-dropdown-title {
+  max-width: 150px !important;
 }
 .x-spreadsheet-toolbar .x-spreadsheet-toolbar-more .x-spreadsheet-toolbar-divider {
   margin-top: 0;