gridjs-spreadsheet 24.7.0 → 24.9.0

package/xspreadsheet.css

@@ -69,6 +69,32 @@ body {
   z-index: 1;
   box-shadow: 1px 1px 3px -1px rgba(255, 255, 0, 0.3);
 }
+.x-spreadsheet-formula-explain {
+  font-family: inherit;
+  position: absolute;
+  padding: 5px 10px;
+  color: #fff;
+  border-radius: 1px;
+  background: #FFF8DC;
+  opacity: 0.7;
+  font-size: 12px;
+  z-index: 201;
+  max-width: 300px;
+}
+.x-spreadsheet-formula-explain:before {
+  pointer-events: none;
+  position: absolute;
+  left: -4px;
+  top: calc(50% - 4px);
+  content: "";
+  width: 8px;
+  height: 8px;
+  background: inherit;
+  -webkit-transform: rotate(45deg);
+  transform: rotate(45deg);
+  z-index: 1;
+  box-shadow: 1px 1px 3px -1px rgba(255, 255, 0, 0.3);
+}
 .x-spreadsheet-color-palette {
   padding: 5px;
 }
@@ -424,6 +450,9 @@ 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;
@@ -436,7 +465,8 @@ body {
   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;
@@ -444,6 +474,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);
 }
@@ -874,6 +907,33 @@ body {
   z-index: 10;
   width: auto;
 }
+.x-spreadsheet-timepicker {
+  position: absolute;
+  z-index: 1000;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  display: none;
+}
+.x-spreadsheet-timepicker select {
+  padding: 5px 10px;
+  border: 1px solid #ddd;
+  background-color: #f8f8f8;
+  cursor: pointer;
+}
+.x-spreadsheet-timepicker-hours,
+.x-spreadsheet-timepicker-minutes,
+.x-spreadsheet-timepicker-seconds {
+  display: inline-block;
+}
+.x-spreadsheet-timepicker select:focus {
+  border-color: #105efb;
+  outline: none;
+}
+.x-spreadsheet-timepicker select:hover {
+  background-color: #e1e1e1;
+}
 .x-spreadsheet-buttons {
   display: flex;
   justify-content: flex-end;
@@ -924,6 +984,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;
@@ -1184,7 +1250,7 @@ form fieldset select {
   display: inline-block;
 }
 .x-spreadsheet-icon .x-spreadsheet-icon-img {
-  background-image: url(92a25d00d3c48133d57c1b98d48a688e.svg);
+  background-image: url(a3b683289420fd8ec937908397907279.svg);
   position: absolute;
   width: 262px;
   height: 444px;
@@ -1266,6 +1332,14 @@ form fieldset select {
   left: -72px;
   top: -18px;
 }
+.x-spreadsheet-icon .x-spreadsheet-icon-img.syntaxstatus {
+  left: -18px;
+  top: -108px;
+}
+.x-spreadsheet-icon .x-spreadsheet-icon-img.showformulas {
+  left: -36px;
+  top: -108px;
+}
 .x-spreadsheet-icon .x-spreadsheet-icon-img.autofilter {
   left: -90px;
   top: -18px;
@@ -1518,6 +1592,10 @@ form fieldset select {
   left: -234px;
   top: -90px;
 }
+.x-spreadsheet-icon .x-spreadsheet-icon-img.openFile {
+  left: 0px;
+  top: -108px;
+}
 .x-spreadsheet-formula-bar {
   height: 25px;
   line-height: 25px;
@@ -1539,7 +1617,7 @@ form fieldset select {
   width: 100%;
   padding: 8px;
   border: 1px solid #ccc;
-  border-radius: 5px;
+  border-radius: 5px 0 0 5px;
 }
 .x-spreadsheet-modal-component-input-div input[type="date"],
 .x-spreadsheet-modal-component-input-div input[type="time"] {
@@ -1561,7 +1639,7 @@ form fieldset select {
   transform: translate(-50%, -50%);
   background: #fff;
   border-radius: 5px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.5);
   z-index: 1000;
   display: flex;
   flex-direction: column;
@@ -1569,11 +1647,17 @@ form fieldset select {
   height: 50%;
   overflow: hidden;
 }
+@media screen and (max-width: 480px) {
+  .x-spreadsheet-modal-component {
+    width: 90% !important;
+    height: 70%;
+  }
+}
 .x-spreadsheet-modal-component:focus {
   outline: none;
 }
 .x-spreadsheet-modal-component-content {
-  padding: 20px;
+  padding: 10px;
   flex-grow: 1;
   background: #f5f5f5;
   overflow-y: auto;
@@ -1646,6 +1730,9 @@ form fieldset select {
   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;