gridjs-spreadsheet 26.6.0 → 26.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gridjs-spreadsheet",
-  "version": "26.6.0",
+  "version": "26.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 based on JSON format.",
   "types": "index.d.ts",
   "main": "xspreadsheet.js",

package/readme.md

@@ -424,6 +424,14 @@ v26.6:
 
 - Improve redaction feature
 
+v26.6.1: 
+
+- Fix redaction font issue
+
+v26.6.2: 
+
+- Fix redaction transparent view issue
+
 ## License
 
 MIT

package/xspreadsheet.css

@@ -872,6 +872,111 @@ body {
   font-weight: bold;
   color: #333;
 }
+.x-spreadsheet-bottombar-right-controls {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  height: 40px;
+}
+.x-spreadsheet-zoom-control {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  gap: 7px;
+  height: 40px;
+  padding: 0 8px;
+  border-left: 1px solid #e0e2e4;
+  color: #2f3437;
+  font-size: 14px;
+  white-space: nowrap;
+}
+button.x-spreadsheet-zoom-button {
+  position: relative;
+  width: 16px;
+  height: 24px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: #2f3437;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0;
+  font-weight: 300;
+  line-height: 0;
+  text-align: center;
+  user-select: none;
+}
+button.x-spreadsheet-zoom-button::before,
+button.x-spreadsheet-zoom-button::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  background: currentColor;
+  transform: translate(-50%, -50%);
+}
+button.x-spreadsheet-zoom-button::before {
+  width: 10px;
+  height: 2px;
+}
+button.x-spreadsheet-zoom-button[aria-label="Zoom in"]::after {
+  width: 2px;
+  height: 10px;
+}
+button.x-spreadsheet-zoom-button:hover {
+  color: #111827;
+}
+button.x-spreadsheet-zoom-button:focus-visible {
+  outline: 1px solid #6b7280;
+  outline-offset: 2px;
+}
+input[type="range"].x-spreadsheet-zoom-slider {
+  width: 80px;
+  height: 24px;
+  margin: 0;
+  background: transparent;
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+}
+input[type="range"].x-spreadsheet-zoom-slider::-webkit-slider-runnable-track {
+  height: 2px;
+  background: #5f6368;
+}
+input[type="range"].x-spreadsheet-zoom-slider::-webkit-slider-thumb {
+  width: 8px;
+  height: 18px;
+  margin-top: -8px;
+  background: #6b6f72;
+  border: 0;
+  border-radius: 0;
+  appearance: none;
+  -webkit-appearance: none;
+}
+input[type="range"].x-spreadsheet-zoom-slider::-moz-range-track {
+  height: 2px;
+  background: #5f6368;
+}
+input[type="range"].x-spreadsheet-zoom-slider::-moz-range-thumb {
+  width: 8px;
+  height: 18px;
+  background: #6b6f72;
+  border: 0;
+  border-radius: 0;
+}
+input[type="range"].x-spreadsheet-zoom-slider:focus-visible {
+  outline: 1px solid #6b7280;
+  outline-offset: 3px;
+}
+.x-spreadsheet-zoom-value {
+  min-width: 42px;
+  text-align: right;
+  font-size: 13px;
+  font-weight: 400;
+  color: #1f2933;
+}
 .x-spreadsheet-menu-wrapper {
   position: relative;
   flex-grow: 1;
@@ -1864,6 +1969,9 @@ form fieldset select {
     bottom: 0;
     z-index: 99999;
   }
+  input[type="range"].x-spreadsheet-zoom-slider {
+    width: 80px;
+  }
   .x-spreadsheet-bottombar .x-spreadsheet-menu {
     display: flex;
   }
@@ -1884,7 +1992,7 @@ form fieldset select {
   display: inline-block;
 }
 .x-spreadsheet-icon .x-spreadsheet-icon-img {
-  background-image: url(a08275ef8caf83cc1c2eae91f17663e8.svg);
+  background-image: url(1f345d060b26fa53bc9d78c36441afd6.svg);
   position: absolute;
   width: 262px;
   height: 444px;
@@ -2298,6 +2406,10 @@ form fieldset select {
   left: -54px;
   top: -126px;
 }
+.x-spreadsheet-icon .x-spreadsheet-icon-img.text-extract-filter {
+  left: -126px;
+  top: -126px;
+}
 .x-spreadsheet-formula-bar {
   height: 25px;
   line-height: 25px;
@@ -2846,4 +2958,249 @@ dialog p {
 .x-spreadsheet-orientation-point.active {
   background-color: red;
 }
+.x-spreadsheet-modal-text-extract-filter {
+  height: calc(100vh - 64px);
+  max-width: 1120px;
+  width: calc(100vw - 64px) !important;
+  max-height: calc(100vh - 64px);
+}
+.x-spreadsheet-modal-text-extract-filter .x-spreadsheet-modal-content {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  height: calc(100% - 48px);
+  padding: 12px 16px 60px;
+  overflow: hidden;
+  position: relative;
+}
+.x-spreadsheet-modal-text-extract-filter-range-selecting .x-spreadsheet-modal-content {
+  height: auto;
+  padding: 10px 16px;
+  overflow: visible;
+}
+.x-spreadsheet-text-extract-filter-subtitle {
+  color: #666;
+  font-size: 13px;
+  line-height: 1.5;
+  margin-bottom: 10px;
+  flex-shrink: 0;
+}
+.x-spreadsheet-text-extract-filter-main {
+  display: grid;
+  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
+  gap: 18px;
+  width: 100%;
+  flex: 1 1 auto;
+  height: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+.x-spreadsheet-text-extract-filter-left {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+.x-spreadsheet-text-extract-filter-source-label {
+  color: #666;
+  font-size: 12px;
+  margin-bottom: 6px;
+  flex-shrink: 0;
+}
+.x-spreadsheet-text-extract-filter-preview {
+  flex: 1 1 auto;
+  width: 100%;
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #dcdcdc;
+  border-radius: 4px;
+  background: #fff;
+  padding: 12px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+.x-spreadsheet-text-extract-filter-preview-grid {
+  display: grid;
+  width: 100%;
+  height: 100%;
+  border-top: 1px solid #dadada;
+  border-left: 1px solid #dadada;
+  min-width: 0;
+  min-height: 0;
+}
+.x-spreadsheet-text-extract-filter-preview-row {
+  display: flex;
+  min-height: 28px;
+}
+.x-spreadsheet-text-extract-filter-preview-cell {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  min-height: 0;
+  border-right: 1px solid #dadada;
+  border-bottom: 1px solid #dadada;
+  box-sizing: border-box;
+  padding: 2px 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--text-extract-filter-preview-font-size, 13px);
+  line-height: 1.15;
+}
+.x-spreadsheet-text-extract-filter-right {
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  padding-right: 4px;
+}
+.x-spreadsheet-text-extract-filter-section {
+  margin-bottom: 14px;
+}
+.x-spreadsheet-text-extract-filter-section-title {
+  color: #666;
+  font-size: 13px;
+  line-height: 20px;
+  margin-bottom: 8px;
+}
+.x-spreadsheet-text-extract-filter-options-inline,
+.x-spreadsheet-text-extract-filter-destination-row {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+}
+.x-spreadsheet-text-extract-filter-destination-row {
+  flex-wrap: wrap;
+  gap: 8px 12px;
+}
+.x-spreadsheet-text-extract-filter-destination-row .x-spreadsheet-text-extract-filter-range-wrap {
+  flex: 1 1 100%;
+  min-width: 0;
+}
+.x-spreadsheet-text-extract-filter-option {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 26px;
+  font-size: 13px;
+  line-height: 20px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.x-spreadsheet-text-extract-filter-option-input {
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  flex: 0 0 auto;
+}
+.x-spreadsheet-text-extract-filter-character-box {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px 18px;
+  border: 1px solid #dcdcdc;
+  border-radius: 4px;
+  padding: 10px 12px;
+  margin-top: 8px;
+}
+.x-spreadsheet-text-extract-filter-range-wrap {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 220px;
+}
+.x-spreadsheet-text-extract-filter-range-input,
+.x-spreadsheet-text-extract-filter-range-select-input {
+  height: 30px;
+  border: 1px solid #cfcfcf;
+  border-radius: 4px 0 0 4px;
+  padding: 0 8px;
+  font-size: 13px;
+  box-sizing: border-box;
+  flex: 1;
+}
+.x-spreadsheet-text-extract-filter-range-button,
+.x-spreadsheet-text-extract-filter-range-select-back {
+  height: 30px;
+  width: 36px;
+  border: 1px solid #cfcfcf;
+  border-left: 0;
+  border-radius: 0 4px 4px 0;
+  background: #fff;
+  color: #333;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+.x-spreadsheet-text-extract-filter-actions {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  margin: 0;
+  padding: 12px 16px 14px;
+  border-top: 1px solid #ededed;
+  flex-shrink: 0;
+  background: #fff;
+}
+.x-spreadsheet-text-extract-filter-message {
+  color: #666;
+  font-size: 12px;
+  line-height: 20px;
+}
+.x-spreadsheet-text-extract-filter-message.error {
+  color: #c0392b;
+}
+.x-spreadsheet-text-extract-filter-action {
+  min-width: 110px;
+  height: 30px;
+  font-size: 13px;
+}
+.x-spreadsheet-text-extract-filter-range-select-page {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: 30px;
+}
+@media screen and (max-width: 900px) {
+  .x-spreadsheet-modal-text-extract-filter {
+    width: calc(100vw - 24px) !important;
+    height: calc(100vh - 24px);
+    max-height: calc(100vh - 24px);
+  }
+  .x-spreadsheet-modal-text-extract-filter .x-spreadsheet-modal-content {
+    height: calc(100% - 48px);
+    padding: 10px 10px 56px;
+  }
+  .x-spreadsheet-text-extract-filter-main {
+    grid-template-columns: 1fr;
+    gap: 12px;
+    overflow: auto;
+  }
+  .x-spreadsheet-text-extract-filter-left,
+  .x-spreadsheet-text-extract-filter-right {
+    min-width: 0;
+  }
+  .x-spreadsheet-text-extract-filter-preview {
+    flex: 0 0 auto;
+    height: 32vh;
+    max-height: 240px;
+    min-height: 160px;
+    padding: 10px;
+  }
+  .x-spreadsheet-text-extract-filter-actions {
+    padding: 10px;
+  }
+  .x-spreadsheet-text-extract-filter-options-inline,
+  .x-spreadsheet-text-extract-filter-destination-row {
+    flex-wrap: wrap;
+    gap: 10px 14px;
+  }
+}