gridjs-spreadsheet 26.6.1 → 26.7.0

package/xspreadsheet.css

@@ -46,6 +46,7 @@ body {
   box-shadow: 1px 1px 3px -1px rgba(0, 0, 0, 0.3);
 }
 .x-spreadsheet-comment-tip {
+  box-sizing: border-box;
   font-family: inherit;
   position: absolute;
   padding: 5px 10px;
@@ -53,6 +54,12 @@ body {
   border-radius: 1px;
   background: #ffffe1;
   font-size: 12px;
+  max-width: min(720px, calc(100vw - 16px));
+  max-height: min(420px, 45vh, calc(100vh - 16px));
+  overflow: auto;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
   z-index: 201;
 }
 .x-spreadsheet-comment-tip:before {
@@ -872,6 +879,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 +1976,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 +1999,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 +2413,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 +2965,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;
+  }
+}