gridjs-spreadsheet 25.7.0 → 25.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gridjs-spreadsheet",
-  "version": "25.7.0",
+  "version": "25.8.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

@@ -171,6 +171,34 @@ xs.on('cells-selected', (cell, { sri, sci, eri, eci }) => {});
 xs.on('object-selected', (obj) => {  console.log('obj id:', obj.id, ', type: ', obj.type); })
 // edited on cell
 xs.on('cell-edited', (text, ri, ci) => {});
+// cells updated
+xs.on('cells-updated', (name, cells) => {
+    console.log('cells updated for sheet name:', name);
+    cells.forEach((acell, index, array) => {
+        console.log('acell got updated:', acell);
+    })
+})
+// cells deleted
+xs.on('cells-deleted', (range) => {
+    console.log('cells deleted :', range);
+})
+// rows deleted
+xs.on('rows-deleted', (ri, n) => {
+    console.log('rows-deleted :', ri, ",size", n);
+})
+// columns deleted
+xs.on('columns-deleted', (ci, n) => {
+    console.log('columns-deleted :', ci, ",size", n);
+})
+// rows inserted
+xs.on('rows-inserted', (ri, n) => {
+    console.log('rows-inserted :', ri, ",size", n);
+})
+// columns inserted
+xs.on('columns-inserted', (ci, n) => {
+    console.log('columns-inserted :', ci, ",size", n);
+})
+
 ```
 
 ## update cell-text
@@ -196,6 +224,7 @@ xs.cellStyle(ri, ci);
   - Paint format
   - Clear format
   - Format
+  - Number Format
   - Font/Font size/ bold/italic/Underline/Strike
   - Highlight
   - Shape/Image resize/rotate/position ajustment
@@ -226,6 +255,7 @@ xs.cellStyle(ri, ci);
   - Insert/Delete form controls
   - Insert/Delete common shapes for autoshape
   - Support display two colors gradient in fill effects 
+  - Mobile compatibility
 
 
 ## Github-Demos
@@ -259,13 +289,13 @@ Modern browsers(chrome, firefox, Safari).
 
 v24.9.1: 
 
-- fix bug that fail to insert column in the new added worksheet
-- fix bug that fail to rename worksheet
-- support lazy loading
+- Fix bug that fail to insert column in the new added worksheet
+- Fix bug that fail to rename worksheet
+- Support lazy loading
 
 v24.10:
 
-- support a view option to show formulas
+- Support a view option to show formulas
 
 v24.11:
 
@@ -273,15 +303,52 @@ v24.11:
 
 v24.12:
 
-- support API to show HTML nodes and interact with HTML nodes at specified cell positions
-- support pre-check event for row/column delete/insert operations
-- support row/column insert/delete events for client APIs
-- support events for updating cells
-- support multiple instances on one page
+- Support API to show HTML nodes and interact with HTML nodes at specified cell positions
+- Support pre-check event for row/column delete/insert operations
+- Support row/column insert/delete events for client APIs
+- Support events for updating cells
+- Support multiple instances on one page
 
 v25.1: 
 
-- support copy/paste from MS-Excel
+- Support copy/paste from MS-Excel
+
+v25.2: 
+
+- Support copy/paste from MS-Excel
+- Enhancement for automatic operations for user’s convenience, such as extending blank row/column, page scrolling, …
+
+v25.3: 
+
+- Support more shotcut keys 
+- Support pasting the content copied from excel to multiple target areas
+
+v25.4: 
+
+- Support show statistics information in the lower right corner when cells are selected
+
+v25.5: 
+
+- Add support for Polish menus.
+- Support APIs for insert/delete rows/columns
+
+v25.6: 
+
+- Support APIs for resize rows/columns
+- Support APIs for hide/unhide rows/columns
+
+v25.7: 
+
+- Support APIs to enable /disable editable range  
+- Support APIs to add/modify/delete worksheet  
+- Support APIs to add/modify/delete comment 
+- Support APIs to set attribute for range of cells
+- Support APIs to delete for range of cells
+
+v25.8: 
+
+- Support automatic text wrapping 
+- Support API to apply font setting in textbox control 
 
 ## License
 
@@ -289,6 +356,6 @@ MIT
 
 ## Support
 
-You can ask any question or request features using the [Forum](https://forum.aspose.com/c/cells).
+You can ask any question or request features or report bugs using the [Forum](https://forum.aspose.com/c/cells).
 
 [Product Page](https://products.aspose.com/cells) | [Product Documentation](https://docs.aspose.com/cells/net/aspose-cells-gridjs/) | [Blog](https://blog.aspose.com/category/cells/) |[API Reference](https://reference.aspose.com/cells/net/aspose.cells.gridjs/) | [Source Code Samples](https://github.com/aspose-cells/Aspose.Cells-for-.NET/tree/master/Examples_GridJs) | [Free Support](https://forum.aspose.com/c/cells)  

package/xspreadsheet.css

@@ -145,14 +145,14 @@ body {
   height: 60px;
   margin: 10px;
   background-repeat: no-repeat;
-  background-image: url(555f60323063f2b68b6eac7ce9c45b19.svg);
+  background-image: url(9ab1b217edd126e8925e88cc8f25a154.svg);
 }
 .x-spreadsheet-banner-icon-s {
   width: 30px;
   height: 30px;
   margin: 5px;
   background-repeat: no-repeat;
-  background-image: url(555f60323063f2b68b6eac7ce9c45b19.svg);
+  background-image: url(9ab1b217edd126e8925e88cc8f25a154.svg);
 }
 .x-spreadsheet-banner-filename {
   width: max-content;
@@ -1381,7 +1381,7 @@ form fieldset select {
   display: inline-block;
 }
 .x-spreadsheet-icon .x-spreadsheet-icon-img {
-  background-image: url(ae125bc972519a804601f2ead209255c.svg);
+  background-image: url(113a871731ce1f8a28d02ff60e8d9478.svg);
   position: absolute;
   width: 262px;
   height: 444px;
@@ -2112,12 +2112,26 @@ dialog p {
 .x-spreadsheet-contextmenu-submenu {
   position: absolute;
   display: none;
-  padding: 5px 0;
   background: #fff;
   border: 1px solid #e0e2e4;
   box-shadow: 1px 2px 5px 2px rgba(51, 51, 51, 0.15);
   z-index: 101;
-  width: 260px;
+  width: max-content;
+}
+.x-spreadsheet-custom-button {
+  border: 1px solid #ddd;
+  background-color: white;
+  color: #333;
+  padding: 4px 12px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 13px;
+  transition: background-color 0.2s ease;
+  outline: none;
+}
+.x-spreadsheet-custom-button:hover {
+  background-color: #e9ecef;
+  border-color: #ccc;
 }
 .x-spreadsheet-item.parent .label {
   float: right;
@@ -2125,4 +2139,141 @@ dialog p {
   color: #999;
   line-height: inherit;
 }
+.x-spreadsheet-alignment-page {
+  display: flex;
+  padding: 15px;
+  gap: 25px;
+  height: 100%;
+}
+.x-spreadsheet-alignment-page .left-section {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  flex: 1;
+}
+.x-spreadsheet-alignment-page .right-section {
+  flex: 0 0 160px;
+}
+.x-spreadsheet-alignment-page .x-spreadsheet-modal-component-section-container {
+  padding-bottom: 10px;
+  border-bottom: 1px solid #e0e2e4;
+}
+.x-spreadsheet-alignment-page .x-spreadsheet-modal-component-section-container:last-child {
+  border-bottom: none;
+}
+.x-spreadsheet-alignment-page .x-spreadsheet-modal-component-dropdown {
+  width: 100%;
+  align-items: center;
+  flex-direction: row;
+}
+.x-spreadsheet-alignment-page .x-spreadsheet-modal-component-dropdown label {
+  flex: 0 0 80px;
+}
+.x-spreadsheet-alignment-page .x-spreadsheet-modal-component-dropdown select {
+  flex: 1;
+}
+.x-spreadsheet-alignment-page .x-spreadsheet-modal-component-checkbox {
+  margin-top: 5px;
+}
+.x-spreadsheet-orientation-container {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  min-width: unset;
+}
+.x-spreadsheet-orientation-box-container {
+  display: flex;
+  height: 200px;
+  align-items: stretch;
+}
+.x-spreadsheet-orientation-box {
+  width: 150px;
+  height: 200px;
+  border: 1px solid #999;
+  position: relative;
+  user-select: none;
+  cursor: pointer;
+}
+.x-spreadsheet-orientation-pointer {
+  width: 100%;
+  position: absolute;
+  top: 45%;
+  left: calc(10px + 5%);
+  transform-origin: 0 50%;
+  display: flex;
+  align-items: center;
+}
+.x-spreadsheet-orientation-pointer .degree-text {
+  color: #333;
+  padding-right: 5px;
+}
+.x-spreadsheet-orientation-line {
+  width: 35%;
+  height: 2px;
+  background-color: red;
+  margin-left: 2px;
+}
+.x-spreadsheet-orientation-line::after {
+  content: '';
+  position: absolute;
+  right: 58%;
+  top: 50%;
+  transform: translateY(-50%) rotate(45deg);
+  width: 8px;
+  height: 8px;
+  background-color: red;
+}
+.x-spreadsheet-orientation-v-btn {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 10px 5px;
+  margin-right: 10px;
+  border: 1px solid #999;
+  cursor: pointer;
+  background-color: #fff;
+  width: 30px;
+  box-sizing: border-box;
+}
+.x-spreadsheet-orientation-v-btn span {
+  display: block;
+  line-height: 1.2;
+}
+.x-spreadsheet-orientation-v-btn.active {
+  background-color: #000;
+  border-color: #000;
+  color: #fff;
+}
+.x-spreadsheet-orientation-input-container {
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+}
+.x-spreadsheet-orientation-input-container .x-spreadsheet-modal-component-input-div {
+  width: 60px;
+}
+.x-spreadsheet-orientation-input-container .x-spreadsheet-modal-component-input-div input {
+  text-align: right;
+}
+.x-spreadsheet-orientation-input-container span {
+  margin-left: 5px;
+}
+.x-spreadsheet-orientation-point {
+  position: absolute;
+  background-color: black;
+}
+.x-spreadsheet-orientation-point.minor {
+  width: 4px;
+  height: 4px;
+  transform: translate(-50%, -50%);
+}
+.x-spreadsheet-orientation-point:not(.minor) {
+  width: 8px;
+  height: 8px;
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+.x-spreadsheet-orientation-point.active {
+  background-color: red;
+}