gridjs-spreadsheet 26.4.5 → 26.5.1

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.1",
   "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,14 @@ v26.4.3:
 
 - Add boundary check for redaction
 
+v26.5: 
+
+- Support add custom buttons in toolbar
+
+v26.5: 
+
+- Improve date picker
+
 ## License
 
 MIT

package/xspreadsheet.css

@@ -405,26 +405,102 @@ body {
   background-color: #f4f5f8;
   opacity: 0.9;
   z-index: 12;
+  display: flex;
+}
+.x-spreadsheet-scrollbar .x-spreadsheet-scrollbar-track {
+  flex: 1 1 auto;
+  align-self: center;
+  min-width: 0;
+  min-height: 0;
+}
+.x-spreadsheet-scrollbar .x-spreadsheet-scrollbar-content {
+  background: #ddd;
+}
+.x-spreadsheet-scrollbar .x-spreadsheet-scrollbar-button {
+  position: relative;
+  box-sizing: border-box;
+  flex: 0 0 15px;
+  width: 15px;
+  height: 15px;
+  margin: 0;
+  padding: 0;
+  border: 1px solid #c7ccd6;
+  background: #eef1f6;
+  cursor: default;
+  outline: none;
+}
+.x-spreadsheet-scrollbar .x-spreadsheet-scrollbar-button::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 0;
+  height: 0;
+  transform: translate(-50%, -50%);
+}
+.x-spreadsheet-scrollbar .x-spreadsheet-scrollbar-button:hover {
+  background: #e1e6ef;
+}
+.x-spreadsheet-scrollbar .x-spreadsheet-scrollbar-button:active {
+  background: #d7dde8;
 }
 .x-spreadsheet-scrollbar.horizontal {
   right: 15px;
+  height: 15px;
+  flex-direction: row;
+}
+.x-spreadsheet-scrollbar.horizontal .x-spreadsheet-scrollbar-track {
+  height: 12px;
   overflow-x: scroll;
   overflow-y: hidden;
-  height: 12px;
-  /* 固定高度，避免覆盖表格内容 */
 }
-.x-spreadsheet-scrollbar.horizontal > div {
+.x-spreadsheet-scrollbar.horizontal .x-spreadsheet-scrollbar-button {
+  width: 15px;
+  height: 15px;
+  border-top-width: 0;
+  border-bottom-width: 0;
+}
+.x-spreadsheet-scrollbar.horizontal .x-spreadsheet-scrollbar-button.decrease::before {
+  border-top: 4px solid transparent;
+  border-right: 5px solid #4f5b6b;
+  border-bottom: 4px solid transparent;
+}
+.x-spreadsheet-scrollbar.horizontal .x-spreadsheet-scrollbar-button.increase::before {
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+  border-left: 5px solid #4f5b6b;
+}
+.x-spreadsheet-scrollbar.horizontal .x-spreadsheet-scrollbar-content {
   height: 1px;
-  background: #ddd;
 }
 .x-spreadsheet-scrollbar.vertical {
   bottom: 15px;
+  width: 15px;
+  flex-direction: column;
+}
+.x-spreadsheet-scrollbar.vertical .x-spreadsheet-scrollbar-track {
+  width: 12px;
   overflow-x: hidden;
   overflow-y: scroll;
 }
-.x-spreadsheet-scrollbar.vertical > div {
+.x-spreadsheet-scrollbar.vertical .x-spreadsheet-scrollbar-button {
+  width: 15px;
+  height: 15px;
+  border-left-width: 0;
+  border-right-width: 0;
+}
+.x-spreadsheet-scrollbar.vertical .x-spreadsheet-scrollbar-button.decrease::before {
+  border-right: 4px solid transparent;
+  border-bottom: 5px solid #4f5b6b;
+  border-left: 4px solid transparent;
+}
+.x-spreadsheet-scrollbar.vertical .x-spreadsheet-scrollbar-button.increase::before {
+  border-top: 5px solid #4f5b6b;
+  border-right: 4px solid transparent;
+  border-left: 4px solid transparent;
+}
+.x-spreadsheet-scrollbar.vertical .x-spreadsheet-scrollbar-content {
   width: 1px;
-  background: #ddd;
 }
 /* @{css-prefix}-overlayer */
 .x-spreadsheet-overlayer {
@@ -919,6 +995,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;
@@ -1033,27 +1124,83 @@ body {
   user-select: none;
 }
 .x-spreadsheet-calendar .calendar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   font-weight: 700;
   line-height: 30px;
   text-align: center;
   width: 100%;
-  float: left;
   background: #f9fafb;
 }
 .x-spreadsheet-calendar .calendar-header .calendar-header-left {
-  padding-left: 5px;
-  float: left;
+  flex: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  min-width: 0;
 }
-.x-spreadsheet-calendar .calendar-header .calendar-header-right {
-  float: right;
+.x-spreadsheet-calendar .calendar-header .calendar-title-button {
+  height: 24px;
+  min-width: 52px;
+  padding: 0 8px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  line-height: 22px;
+  cursor: pointer;
 }
-.x-spreadsheet-calendar .calendar-header .calendar-header-right a {
-  padding: 3px 0;
-  margin-right: 2px;
+.x-spreadsheet-calendar .calendar-header .calendar-title-button:hover {
+  border-color: #d8e6f7;
+  background: #edf5ff;
+  color: #2185D0;
+}
+.x-spreadsheet-calendar .calendar-header .calendar-prev,
+.x-spreadsheet-calendar .calendar-header .calendar-next {
+  flex: 0 0 28px;
+  height: 30px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid transparent;
   border-radius: 2px;
+  color: inherit;
+  cursor: pointer;
 }
-.x-spreadsheet-calendar .calendar-header .calendar-header-right a:hover {
-  background: rgba(0, 0, 0, 0.08);
+.x-spreadsheet-calendar .calendar-header .calendar-prev:hover,
+.x-spreadsheet-calendar .calendar-header .calendar-next:hover {
+  border-color: #d8e6f7;
+  background: #edf5ff;
+  color: #2185D0;
+}
+.x-spreadsheet-calendar .calendar-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  min-height: 36px;
+  padding: 0 10px;
+  border-top: 1px solid #eef0f3;
+  background: #fff;
+}
+.x-spreadsheet-calendar .calendar-footer-button {
+  height: 26px;
+  min-width: 46px;
+  padding: 0 8px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  background: transparent;
+  color: #2185D0;
+  font-weight: 700;
+  line-height: 24px;
+  cursor: pointer;
+}
+.x-spreadsheet-calendar .calendar-footer-button:hover {
+  border-color: #d8e6f7;
+  background: #edf5ff;
+  color: #2185D0;
 }
 .x-spreadsheet-calendar .calendar-body {
   border-collapse: collapse;
@@ -1068,17 +1215,57 @@ body {
   line-height: 30px;
   padding: 0;
 }
+.x-spreadsheet-calendar .calendar-body td > .cell {
+  border: 1px solid transparent;
+  border-radius: 2px;
+  cursor: pointer;
+}
 .x-spreadsheet-calendar .calendar-body td > .cell:hover {
-  background: #ecf6fd;
+  border-color: #d8e6f7;
+  background: #edf5ff;
+  color: #2185D0;
 }
 .x-spreadsheet-calendar .calendar-body td > .cell.active,
 .x-spreadsheet-calendar .calendar-body td > .cell.active:hover {
   background: #ecf6fd;
   color: #2185D0;
 }
+.x-spreadsheet-calendar .calendar-body td > .cell.today {
+  color: #2185D0;
+}
 .x-spreadsheet-calendar .calendar-body td > .cell.disabled {
   pointer-events: none;
   opacity: 0.5;
+  cursor: default;
+}
+.x-spreadsheet-calendar .calendar-body td > .cell.out-range {
+  color: rgba(0, 0, 0, 0.35);
+}
+.x-spreadsheet-calendar .calendar-body.month-mode td,
+.x-spreadsheet-calendar .calendar-body.year-mode td {
+  width: 33.33333333%;
+  min-width: 64px;
+  line-height: 42px;
+}
+.x-spreadsheet-calendar .calendar-body.month-mode td > .cell,
+.x-spreadsheet-calendar .calendar-body.year-mode td > .cell {
+  margin: 4px 8px;
+  border-radius: 6px;
+  border: 1px solid transparent;
+}
+.x-spreadsheet-calendar .calendar-body.month-mode td > .cell:hover,
+.x-spreadsheet-calendar .calendar-body.year-mode td > .cell:hover {
+  border-color: #d8e6f7;
+  background: #edf5ff;
+  color: #2185D0;
+}
+.x-spreadsheet-calendar .calendar-body.month-mode td > .cell.active,
+.x-spreadsheet-calendar .calendar-body.year-mode td > .cell.active,
+.x-spreadsheet-calendar .calendar-body.month-mode td > .cell.active:hover,
+.x-spreadsheet-calendar .calendar-body.year-mode td > .cell.active:hover {
+  border-color: #2185D0;
+  background: #2185D0;
+  color: #fff;
 }
 .x-spreadsheet-datepicker {
   box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);