gridjs-spreadsheet 24.6.2 → 24.8.0

package/{d740084c6ca54e8e1fe35da0c088c135.svg → 92a25d00d3c48133d57c1b98d48a688e.svg}

@@ -26,13 +26,13 @@
    inkscape:pageopacity="0.0"
    inkscape:pagecheckerboard="0"
    showgrid="false"
-   inkscape:zoom="5.8070322"
-   inkscape:cx="197.08863"
-   inkscape:cy="82.572299"
+   inkscape:zoom="6.4747389"
+   inkscape:cx="215.99327"
+   inkscape:cy="94.907303"
    inkscape:window-width="1304"
    inkscape:window-height="760"
    inkscape:window-x="214"
-   inkscape:window-y="110"
+   inkscape:window-y="82"
    inkscape:window-maximized="0"
    inkscape:current-layer="g48"
    inkscape:showpageshadow="2"
@@ -834,12 +834,51 @@
        stroke="#000000"
        stroke-width="2"
        stroke-linecap="round"
-       stroke-linejoin="round" /></g><g
-     style="fill:none"
-     id="g54"
-     transform="matrix(1.2505097,0,0,0.87426798,45.430764,5.5305356)"><path
-       fill-rule="evenodd"
-       clip-rule="evenodd"
-       d="M 2.78233,2.21707 C 2.70732,2.14206 2.60557,2.09991 2.49949,2.09991 c -0.10609,0 -0.20783,0.04215 -0.28285,0.11716 l -1.999995,2 c -0.1562099,0.15621 -0.1562099,0.40948 0,0.56569 0.15621,0.15621 0.409476,0.15621 0.565685,0 L 2.09949,3.4656 v 8.0686 L 0.78233,10.2171 c -0.15621,-0.1562 -0.409476,-0.1562 -0.565685,0 -0.1562101,0.1562 -0.1562101,0.4094 0,0.5657 l 1.999995,2 c 0.07502,0.075 0.17676,0.1171 0.28285,0.1171 0.10608,0 0.20782,-0.0421 0.28284,-0.1171 l 2,-2 c 0.15621,-0.1563 0.15621,-0.4095 0,-0.5657 -0.15621,-0.1562 -0.40948,-0.1562 -0.56569,0 L 2.89949,11.5342 V 3.4656 l 1.31715,1.31716 c 0.15621,0.15621 0.40948,0.15621 0.56569,0 0.15621,-0.15621 0.15621,-0.40948 0,-0.56569 z M 10.5,2.74997 c 0.2107,0 0.3988,0.13214 0.4703,0.33039 l 3,8.31954 c 0.0937,0.2598 -0.041,0.5463 -0.3007,0.64 -0.2598,0.0937 -0.5463,-0.041 -0.64,-0.3007 L 12.0477,9.016 H 8.95228 L 7.97033,11.7392 C 7.87666,11.9989 7.59013,12.1336 7.33036,12.0399 7.07059,11.9462 6.93595,11.6597 7.02962,11.3999 L 10.0296,3.08036 C 10.1011,2.88211 10.2892,2.74997 10.5,2.74997 Z m 0,1.97399 1.2412,3.44204 H 9.25879 Z"
-       fill="#000000"
-       id="path1-27" /></g></g></svg>
+       stroke-linejoin="round" /></g><path
+     fill-rule="evenodd"
+     clip-rule="evenodd"
+     d="m 48.910095,7.4688489 c -0.0938,-0.065579 -0.22104,-0.1024292 -0.353695,-0.1024292 -0.132666,0 -0.259893,0.03685 -0.353706,0.1024292 l -2.501013,1.748536 c -0.195342,0.1365694 -0.195342,0.3579952 0,0.4945646 0.195342,0.1365694 0.512053,0.1365694 0.707394,0 l 1.647122,-1.1515508 v 7.0541183 l -1.647122,-1.151498 c -0.195342,-0.136561 -0.512053,-0.136561 -0.707394,0 -0.195343,0.136561 -0.195343,0.357925 0,0.494573 l 2.501013,1.748536 c 0.09381,0.06557 0.22104,0.102377 0.353706,0.102377 0.132655,0 0.259881,-0.03681 0.353695,-0.102377 l 2.501019,-1.748536 c 0.195342,-0.136648 0.195342,-0.358012 0,-0.494573 -0.195342,-0.136561 -0.512059,-0.136561 -0.707401,0 l -1.647109,1.151498 V 8.5603987 l 1.647109,1.1515508 c 0.195342,0.1365694 0.512059,0.1365694 0.707401,0 0.195342,-0.1365694 0.195342,-0.3579952 0,-0.4945646 z m 9.651021,0.4658974 c 0.263482,0 0.498703,0.1155258 0.588115,0.2888494 l 3.751529,7.2735073 c 0.117172,0.227135 -0.05127,0.477613 -0.376029,0.559532 -0.324882,0.08192 -0.683153,-0.03584 -0.800326,-0.262893 L 60.49653,13.412936 h -3.870853 l -1.227938,2.380806 c -0.117135,0.227048 -0.475444,0.344812 -0.800289,0.262893 -0.324845,-0.08192 -0.493213,-0.332397 -0.376078,-0.559532 l 3.751504,-7.2735073 c 0.08941,-0.1733236 0.324632,-0.2888494 0.58824,-0.2888494 z m 0,1.7257963 1.552132,3.0092654 h -3.104277 z"
+     fill="#000000"
+     id="path1-27"
+     style="stroke-width:1.0456" /><g
+     style="fill:#000000"
+     id="g4"
+     transform="matrix(0.68058091,0,0,0.40861931,66.257614,7.3742294)"><g
+       id="SVGRepo_bgCarrier"
+       stroke-width="0" /><g
+       id="SVGRepo_tracerCarrier"
+       stroke-linecap="round"
+       stroke-linejoin="round" /><g
+       id="SVGRepo_iconCarrier"><g
+         fill="none"
+         stroke="#000000"
+         stroke-linecap="round"
+         stroke-width="2"
+         id="g6"><path
+           d="m 8.5,14.5 h 7.657"
+           id="path1-793" /><path
+           d="m 8.5,10.5 h 7.657"
+           id="path2-8" /><path
+           d="m 8.5,6.5 h 7.657"
+           id="path3-0" /><path
+           d="m 5.5,14.5 v 0"
+           id="path4-24" /><path
+           d="m 5.5,10.5 v 0"
+           id="path5-8" /><path
+           d="m 5.5,6.5 v 0"
+           id="path6-3" /></g><path
+         fill="none"
+         stroke="#000000"
+         stroke-linecap="round"
+         stroke-width="2"
+         d="M 9.128,20.197 H 3.444 A 2.22,2.22 0 0 1 1.215,18.044 V 3.152 A 2.153,2.153 0 0 1 3.367,0.997 h 15.48 A 2.153,2.153 0 0 1 21,3.152 v 8.738"
+         id="path7-9" /><path
+         fill="#000000"
+         d="M 16.5,23.499 A 1.464,1.464 0 0 1 15.406,23.015 L 12.443,20.046 A 1.479,1.479 0 0 1 12,18.985 a 1.5,1.5 0 0 1 0.462,-1.078 1.56,1.56 0 0 1 2.113,0.037 l 1.925,1.931 4.943,-4.959 a 1.543,1.543 0 0 1 2.132,0.02 1.461,1.461 0 0 1 0.425,1.04 1.5,1.5 0 0 1 -0.45,1.068 l -5.993,6.012 A 1.44,1.44 0 0 1 16.5,23.499 Z"
+         id="path8-0" /></g></g><path
+     fill-rule="evenodd"
+     clip-rule="evenodd"
+     d="m 49.447038,7.4688489 c -0.0938,-0.065579 -0.22104,-0.1024292 -0.353695,-0.1024292 -0.132666,0 -0.259893,0.03685 -0.353706,0.1024292 l -2.501013,1.748536 c -0.195342,0.1365694 -0.195342,0.3579952 0,0.4945646 0.195342,0.1365694 0.512053,0.1365694 0.707394,0 L 48.59314,8.5603987 v 7.0541183 l -1.647122,-1.151498 c -0.195342,-0.136561 -0.512053,-0.136561 -0.707394,0 -0.195343,0.136561 -0.195343,0.357925 0,0.494573 l 2.501013,1.748536 c 0.09381,0.06557 0.22104,0.102377 0.353706,0.102377 0.132655,0 0.259881,-0.03681 0.353695,-0.102377 l 2.501019,-1.748536 c 0.195342,-0.136648 0.195342,-0.358012 0,-0.494573 -0.195342,-0.136561 -0.512059,-0.136561 -0.707401,0 l -1.647109,1.151498 V 8.5603987 l 1.647109,1.1515508 c 0.195342,0.1365694 0.512059,0.1365694 0.707401,0 0.195342,-0.1365694 0.195342,-0.3579952 0,-0.4945646 z m 9.651021,0.4658974 c 0.263482,0 0.498703,0.1155258 0.588115,0.2888494 l 3.751529,7.2735073 c 0.117172,0.227135 -0.05127,0.477613 -0.376029,0.559532 -0.324882,0.08192 -0.683153,-0.03584 -0.800326,-0.262893 L 61.033473,13.412936 H 57.16262 l -1.227938,2.380806 c -0.117135,0.227048 -0.475444,0.344812 -0.800289,0.262893 -0.324845,-0.08192 -0.493213,-0.332397 -0.376078,-0.559532 l 3.751504,-7.2735073 c 0.08941,-0.1733236 0.324632,-0.2888494 0.58824,-0.2888494 z m 0,1.7257963 1.552132,3.0092654 h -3.104277 z"
+     fill="#000000"
+     id="path43"
+     style="stroke-width:1.0456" /></g></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gridjs-spreadsheet",
-  "version": "24.6.2",
+  "version": "24.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.",
   "types": "index.d.ts",
   "main": "xspreadsheet.js",

package/package.json.bak

@@ -1,6 +1,6 @@
 {
   "name": "gridjs-spreadsheet",
-  "version": "24.6.1",
+  "version": "24.6.2",
   "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.",
   "types": "index.d.ts",
   "main": "xspreadsheet.js",

package/xspreadsheet.css

@@ -424,8 +424,23 @@ body {
   -webkit-box-sizing: content-box;
   -moz-box-sizing: content-box;
 }
+.x-spreadsheet-selector .x-spreadsheet-selector-area.dashed {
+  border: 2px dashed #4b89ff;
+}
+.x-spreadsheet-selector .x-spreadsheet-selector-validation-input-message {
+  position: relative;
+  z-index: 100;
+  background: #f5f6f7;
+  border: 2px solid #e0e2e4;
+  border-radius: 5px;
+  padding: 5px;
+  font-size: 12px;
+  color: #333;
+  box-shadow: 1px 2px 5px 2px rgba(51, 51, 51, 0.15);
+}
 .x-spreadsheet-selector .x-spreadsheet-selector-clipboard,
-.x-spreadsheet-selector .x-spreadsheet-selector-autofill {
+.x-spreadsheet-selector .x-spreadsheet-selector-autofill,
+.x-spreadsheet-selector .x-spreadsheet-selector-fixed-cell {
   position: absolute;
   background: transparent;
   z-index: 100;
@@ -433,6 +448,9 @@ body {
 .x-spreadsheet-selector .x-spreadsheet-selector-clipboard {
   border: 2px dashed #4b89ff;
 }
+.x-spreadsheet-selector .x-spreadsheet-selector-fixed-cell {
+  border: 2px solid #4b89ff;
+}
 .x-spreadsheet-selector .x-spreadsheet-selector-autofill {
   border: 1px dashed rgba(0, 0, 0, 0.45);
 }
@@ -913,6 +931,12 @@ body {
   background-color: #d9dc22;
   font-size: 8px;
 }
+.x-spreadsheet-modal-component-input-btn {
+  border: 1px solid #0078d4;
+  color: #0078d4;
+  background: white;
+  border-radius: 0 5px 5px 0;
+}
 .x-spreadsheet-form-input {
   font-size: 1em;
   position: relative;
@@ -1173,7 +1197,7 @@ form fieldset select {
   display: inline-block;
 }
 .x-spreadsheet-icon .x-spreadsheet-icon-img {
-  background-image: url(d740084c6ca54e8e1fe35da0c088c135.svg);
+  background-image: url(92a25d00d3c48133d57c1b98d48a688e.svg);
   position: absolute;
   width: 262px;
   height: 444px;
@@ -1503,6 +1527,10 @@ form fieldset select {
   left: -216px;
   top: -90px;
 }
+.x-spreadsheet-icon .x-spreadsheet-icon-img.data-validation {
+  left: -234px;
+  top: -90px;
+}
 .x-spreadsheet-formula-bar {
   height: 25px;
   line-height: 25px;
@@ -1512,6 +1540,202 @@ form fieldset select {
   resize: vertical;
   overflow: hidden;
 }
+.x-spreadsheet-modal-component-input-div {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.x-spreadsheet-modal-component-input-div label {
+  margin-bottom: 5px;
+}
+.x-spreadsheet-modal-component-input-div input {
+  width: 100%;
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 5px 0 0 5px;
+}
+.x-spreadsheet-modal-component-input-div input[type="date"],
+.x-spreadsheet-modal-component-input-div input[type="time"] {
+  padding: 0;
+}
+.x-spreadsheet-modal-component-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+}
+.x-spreadsheet-modal-component {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: #fff;
+  border-radius: 5px;
+  box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  width: 50%;
+  height: 50%;
+  overflow: hidden;
+}
+.x-spreadsheet-modal-component:focus {
+  outline: none;
+}
+.x-spreadsheet-modal-component-content {
+  padding: 10px;
+  flex-grow: 1;
+  background: #f5f5f5;
+  overflow-y: auto;
+}
+.x-spreadsheet-modal-component-header {
+  padding: 10px 20px;
+  background: #f5f5f5;
+  border-bottom: 1px solid #ddd;
+  display: flex;
+  justify-content: space-between;
+  font-weight: bold;
+  font-size: 18px;
+}
+.x-spreadsheet-modal-component-footer {
+  padding: 5px 10px;
+  background: #f5f5f5;
+  border-top: 1px solid #ddd;
+  text-align: right;
+}
+.x-spreadsheet-modal-component-footer button {
+  line-height: 1.5rem;
+  padding: 5px 10px;
+  font-size: 16px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background-color: #ffffff;
+  cursor: pointer;
+  outline: none;
+  transition: background-color 0.3s, border-color 0.3s;
+  margin: 5px;
+}
+.x-spreadsheet-modal-component-footer button {
+  border-color: #0078d4;
+  /* Blue border */
+  color: #0078d4;
+}
+.x-spreadsheet-modal-component-footer button:hover {
+  background-color: #e6f7ff;
+  /* Light blue background on hover */
+}
+.x-spreadsheet-modal-component-footer button:focus {
+  box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.5);
+  /* Focus outline */
+}
+.x-spreadsheet-modal-component-footer button.cancel {
+  border-color: #ccc;
+  color: #333;
+}
+.x-spreadsheet-modal-component-footer button.cancel:hover {
+  background-color: #f0f0f0;
+}
+.x-spreadsheet-modal-component-footer button.cancel:focus {
+  box-shadow: 0 0 0 2px rgba(204, 204, 204, 0.5);
+}
+.x-spreadsheet-modal-component-section-container {
+  height: 100%;
+}
+.x-spreadsheet-modal-component-section-title {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  color: gray;
+}
+.x-spreadsheet-modal-component-section-title span {
+  flex-shrink: 0;
+}
+.x-spreadsheet-modal-component-section-line {
+  flex-grow: 1;
+  height: 1px;
+  background: lightgray;
+  margin-left: 2px;
+}
+.modal-animate {
+  transition: top 0.5s ease, height 0.5s ease;
+}
+.x-spreadsheet-modal-component-section-content {
+  padding: 0 5px;
+  border-radius: 4px;
+  height: max-content;
+}
+/* Outer wrapper for the modal component tabs */
+.x-spreadsheet-modal-component-tabs {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+.x-spreadsheet-modal-component-label {
+  font-size: 16px;
+}
+.x-spreadsheet-modal-component-checkbox {
+  display: flex;
+  align-items: baseline;
+  margin-bottom: 15px;
+}
+.x-spreadsheet-modal-component-checkbox label {
+  margin-left: 5px;
+}
+.x-spreadsheet-modal-component-dropdown {
+  display: flex;
+  flex-direction: column;
+}
+.x-spreadsheet-modal-component-dropdown select {
+  height: 35px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}
+.x-spreadsheet-modal-component-textarea {
+  display: flex;
+  flex-direction: column;
+}
+.x-spreadsheet-modal-component-textarea textarea {
+  resize: none;
+  width: 100%;
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  height: 100px;
+}
+/* Header row containing the tab buttons */
+.x-spreadsheet-modal-component-tab-headers {
+  display: flex;
+  border-bottom: 1px solid #ccc;
+}
+/* Individual tab buttons */
+.x-spreadsheet-modal-component-tab-button {
+  padding: 0 15px;
+  cursor: pointer;
+  background-color: #f0f0f0;
+  border: none;
+  outline: none;
+  transition: background-color 0.3s;
+  font-size: 16px;
+}
+/* Tab button when active */
+.x-spreadsheet-modal-component-tab-button.active {
+  background-color: #ffffff;
+  border-bottom: 2px solid #0078d4;
+  /* Blue line to indicate active tab */
+  font-weight: bold;
+}
+/* Content area for the tabs */
+.x-spreadsheet-modal-component-tab-content {
+  padding: 20px;
+  background-color: #ffffff;
+  border: 1px solid #ccc;
+  border-top: none;
+  flex: 1;
+}
 .x-spreadsheet-bar-label {
   flex: 0 0 auto;
   display: inline-block;