gridjs-spreadsheet 25.5.0 → 25.7.0

package/example/src/main/resources/templates/fileFromUpload.html

@@ -5,23 +5,24 @@
     <meta name="viewport" content="width=device-width" />
     <title>gridjs-web-demo</title>
 
-    <style>
-        ::-webkit-scrollbar, ::-webkit-scrollbar-button {
-            width: 8px;
-            height: 8px;
-        }
+<style>
+::-webkit-scrollbar, ::-webkit-scrollbar-button {
+	width: 8px;
+	height: 8px;
+}
 
-        ::-webkit-scrollbar-track {
-            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-            border-radius: 10px;
-            background-color: #FFF;
-        }
+::-webkit-scrollbar-track {
+	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+	border-radius: 10px;
+	background-color: #FFF;
+}
+
+::-webkit-scrollbar-thumb {
+	border-radius: 10px;
+	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
+	background-color: #AAA;
+}
 
-        ::-webkit-scrollbar-thumb {
-            border-radius: 10px;
-            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
-            background-color: #AAA;
-        }
 html, body {
 	margin: 0;
 	padding: 0;
@@ -42,8 +43,8 @@ html, body {
 	height: 100%;
 	object-fit: contain; /* 对于图像或视频很有用 */
 }
-    </style>
-    <!--<link rel="stylesheet" href="./quantumui.min.22.5.5.2.css?v=20220312" />-->
+</style>
+<!--<link rel="stylesheet" href="./quantumui.min.22.5.5.2.css?v=20220312" />-->
     <link rel="stylesheet" href="/xspread/bootstrap.min.22.5.5.2.css?v=20220315" />
     <script src="/xspread/jquery-2.1.1.js"></script>
     <link rel="stylesheet" href="/xspread/jquery-ui.min.css" />

package/example/src/main/resources/templates/index.html

@@ -52,7 +52,7 @@ html, body {
     <!--    <script src="vconsole.min.js"></script> -->
     <!--for local reference-->
     <!--
-     <link rel="stylesheet" href="/xspread/xspreadsheet.css?v=20230525" />
+  <link rel="stylesheet" href="/xspread/xspreadsheet.css?v=20230525" />
      <script src="/xspread/xspreadsheet.js?v=20230525"></script>
      -->
 

package/package.json

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

@@ -163,42 +163,14 @@ const s = new Spreadsheet("#gridjs-demo")
 
 ## Bind events
 ```javascript
-// single selection
+//single selection
 xs.on('cell-selected', (cell, ri, ci) => {});
-// range selection
+//range selection
 xs.on('cells-selected', (cell, { sri, sci, eri, eci }) => {});
-// shape/image selection
+//shape/image selection
 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
@@ -224,7 +196,6 @@ 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
@@ -255,7 +226,6 @@ 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
@@ -313,31 +283,12 @@ v25.1:
 
 - 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
-
 ## License
 
 MIT
 
 ## Support
 
-You can ask any question or request features or report bugs using the [Forum](https://forum.aspose.com/c/cells).
+You can ask any question or request features 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

@@ -484,6 +484,14 @@ body {
 .x-spreadsheet-selector .x-spreadsheet-selector-autofill {
   border: 1px dashed rgba(0, 0, 0, 0.45);
 }
+.x-spreadsheet-selector .x-spreadsheet-selector-userlabel {
+  position: absolute;
+  top: -20px;
+  /* 比父级 div 向上偏移 20px */
+  left: 0;
+  /* 固定在父级 div 的左边 */
+  padding: 4px 8px;
+}
 .x-spreadsheet-selector .x-spreadsheet-selector-corner {
   pointer-events: auto;
   position: absolute;
@@ -653,11 +661,43 @@ body {
   background: #f5f6f7;
   display: flex;
 }
+.x-spreadsheet-scroll-button-container {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  border-left: 1px solid #e0e2e4;
+  padding: 0 5px;
+}
+.x-spreadsheet-scroll-button {
+  width: 20px;
+  height: 20px;
+  line-height: 18px;
+  text-align: center;
+  cursor: pointer;
+  border: 1px solid #ccc;
+  border-radius: 50%;
+  margin: 0 2px;
+  user-select: none;
+  font-weight: bold;
+  color: #666;
+  background-color: #fff;
+  transition: background-color 0.2s, opacity 0.2s;
+}
+.x-spreadsheet-scroll-button:hover {
+  background-color: #f0f0f0;
+}
+.x-spreadsheet-scroll-button[disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+  background-color: #f5f5f5;
+  pointer-events: none;
+}
 .x-spreadsheet-bottombar {
   position: relative;
   border-top: 1px solid #e0e2e4;
   display: flex;
   justify-content: space-between;
+  align-items: center;
 }
 .x-spreadsheet-bottombar .x-spreadsheet-menu > li {
   line-height: 40px;
@@ -665,10 +705,8 @@ body {
   padding-top: 0;
   padding-bottom: 0;
   vertical-align: middle;
-  border-right: 1px solid #e8eaed;
 }
 .x-spreadsheet-bottombar .x-spreadsheet-stats {
-  border-left: 1px solid #e0e2e4;
   padding: 0 10px;
   height: 40px;
   display: flex;
@@ -685,14 +723,64 @@ body {
   font-weight: bold;
   color: #333;
 }
+.x-spreadsheet-menu-wrapper {
+  position: relative;
+  flex-grow: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+}
+.x-spreadsheet-menu-wrapper::before,
+.x-spreadsheet-menu-wrapper::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 20px;
+  pointer-events: none;
+  z-index: 2;
+  transition: opacity 0.3s;
+  opacity: 0;
+}
+.x-spreadsheet-menu-wrapper::before {
+  left: 0;
+  background: linear-gradient(to right, rgba(0, 0, 0, 0.12), transparent);
+}
+.x-spreadsheet-menu-wrapper::after {
+  right: 0;
+  background: linear-gradient(to left, rgba(0, 0, 0, 0.12), transparent);
+}
+.x-spreadsheet-menu-wrapper.scrollable-left::before {
+  opacity: 1;
+}
+.x-spreadsheet-menu-wrapper.scrollable-right::after {
+  opacity: 1;
+}
 .x-spreadsheet-menu {
   list-style: none;
   margin: 0;
   padding: 0;
   user-select: none;
+  display: flex;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.x-spreadsheet-menu::-webkit-scrollbar {
+  display: none;
+}
+.x-spreadsheet-bottombar-actions {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  padding: 0 5px;
+  height: 100%;
+}
+.x-spreadsheet-bottombar-actions .x-spreadsheet-icon,
+.x-spreadsheet-bottombar-actions .x-spreadsheet-dropdown {
+  margin: 0 6px;
 }
 .x-spreadsheet-menu > li {
-  float: left;
+  flex-shrink: 0;
   line-height: 1.25em;
   padding: 0.785em 1em;
   margin: 0;
@@ -726,7 +814,6 @@ body {
   position: absolute;
   top: 50%;
   right: 5px;
-  /* 适当调整右侧间距 */
   transform: translateY(-50%);
   width: 0;
   height: 0;
@@ -1294,7 +1381,7 @@ form fieldset select {
   display: inline-block;
 }
 .x-spreadsheet-icon .x-spreadsheet-icon-img {
-  background-image: url(a3b683289420fd8ec937908397907279.svg);
+  background-image: url(ae125bc972519a804601f2ead209255c.svg);
   position: absolute;
   width: 262px;
   height: 444px;
@@ -1687,10 +1774,31 @@ form fieldset select {
   z-index: 1000;
   display: flex;
   flex-direction: column;
-  width: 50%;
-  height: 50%;
+  min-width: 20%;
   overflow: hidden;
 }
+.x-spreadsheet-modal-radio-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 10px 0;
+  align-items: flex-start;
+}
+.x-spreadsheet-modal-radio-option {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+.x-spreadsheet-modal-radio-option input[type="radio"] {
+  margin-right: 8px;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+}
+.x-spreadsheet-modal-radio-option label {
+  font-size: 14px;
+  margin: 0;
+}
 @media screen and (max-width: 480px) {
   .x-spreadsheet-modal-component {
     width: 90% !important;
@@ -1998,4 +2106,23 @@ dialog p {
   margin-top: 10px;
   width: 60px;
 }
+.x-spreadsheet-item.parent {
+  position: relative;
+}
+.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;
+}
+.x-spreadsheet-item.parent .label {
+  float: right;
+  font-size: 0.8em;
+  color: #999;
+  line-height: inherit;
+}