gridjs-spreadsheet 26.8.0 → 26.9.0

package/readme.md

@@ -110,7 +110,7 @@ spreadsheet.setFileName(workbookJson.filename);
 ```html
 <link
   rel="stylesheet"
-  href="https://unpkg.com/gridjs-spreadsheet@26.7.0/xspreadsheet.css"
+  href="https://unpkg.com/gridjs-spreadsheet/xspreadsheet.css"
 >
 
 <script src="https://unpkg.com/jszip@3.10.1/dist/jszip.min.js"></script>
@@ -393,6 +393,18 @@ Modern browsers — Chrome, Firefox, Safari, Edge.
 
 ## Version History
 
+<details>
+<summary><strong>v26.9</strong> — Fix autofilter value for special characters  </summary>
+
+- Fix autofilter value for special characters 
+</details>
+
+<details>
+<summary><strong>v26.8.1</strong> — Support redaction for search matches</summary>
+
+- Support redaction for search matches
+</details>
+
 <details>
 <summary><strong>v26.8</strong> — Support redaction for entire sheet</summary>
 
@@ -580,6 +592,7 @@ Modern browsers — Chrome, Firefox, Safari, Edge.
 - [Developer's Guide — Java](https://docs.aspose.com/cells/java/aspose-cells-gridjs/)
 - [Developer's Guide — Python](https://docs.aspose.com/cells/python-net/aspose-cells-gridjs/)
 - [Client API How-To](https://docs.aspose.com/cells/net/aspose-cells-gridjs/how-to-use-gridjs-client-api/)
+- [Skills](https://github.com/aspose-cells/skills/)
 
 ### Product Links
 - [Aspose.Cells Product Page](https://products.aspose.com/cells)

package/shared.d.ts

@@ -1,4 +1,4 @@
-import type Spreadsheet from 'gridjs-spreadsheet';
+import type Spreadsheet, { SemanticAutomationOptions } from 'gridjs-spreadsheet';
 
 export interface GridJsEndpoints {
   updateCell: string;
@@ -48,6 +48,7 @@ export interface GridJsAdapterConfig {
   fileName?: string;
   basicZorder?: number;
   view?: Record<string, any>;
+  semanticAutomation?: SemanticAutomationOptions;
   callbacks?: GridJsAdapterCallbacks;
   dependencies?: GridJsAdapterDependencies;
 }

package/shared.js

@@ -119,6 +119,7 @@ function buildSpreadsheetOptions(config, endpoints) {
     ...(config.token ? { token: config.token } : {}),
     ...(config.loadingGif ? { loadingGif: config.loadingGif } : {}),
     ...(config.view ? { view: config.view } : {}),
+    ...(config.semanticAutomation ? { semanticAutomation: config.semanticAutomation } : {}),
   };
 }
 

package/vue.d.ts

@@ -1,5 +1,5 @@
 import type { DefineComponent } from 'vue';
-import type Spreadsheet from 'gridjs-spreadsheet';
+import type Spreadsheet, { SemanticAutomationOptions } from 'gridjs-spreadsheet';
 import type { GridJsAdapter } from './shared';
 
 export interface GridJsSpreadsheetProps {
@@ -12,6 +12,7 @@ export interface GridJsSpreadsheetProps {
   height?: string | number;
   showToolbar?: boolean;
   showContextmenu?: boolean;
+  semanticAutomation?: SemanticAutomationOptions;
 }
 
 export declare const GridJsSpreadsheet: DefineComponent<GridJsSpreadsheetProps, {}, any>;

package/vue.js

@@ -30,6 +30,7 @@ export const GridJsSpreadsheet = defineComponent({
     height: { type: [String, Number], default: 'calc(100vh - 96px)' },
     showToolbar: { type: Boolean, default: true },
     showContextmenu: { type: Boolean, default: true },
+    semanticAutomation: { type: Object, default: null },
   },
   emits: [
     'ready',
@@ -59,6 +60,7 @@ export const GridJsSpreadsheet = defineComponent({
         token: props.token,
         showToolbar: props.showToolbar,
         showContextmenu: props.showContextmenu,
+        semanticAutomation: props.semanticAutomation,
         callbacks: {
           ready: (instance, activeAdapter) => emit('ready', instance, activeAdapter),
           change: (...args) => emit('change', ...args),
@@ -84,6 +86,7 @@ export const GridJsSpreadsheet = defineComponent({
         props.locale,
         props.showToolbar,
         props.showContextmenu,
+        props.semanticAutomation,
       ],
       () => {
         mountGridJs().catch(error => emit('error', { type: 'mountError', error }));

package/xspreadsheet.css

@@ -18,9 +18,24 @@ body {
   position: relative;
   overflow: hidden;
 }
+.x-spreadsheet-sheet.x-spreadsheet-sheet-chart-mode > .x-spreadsheet-table {
+  visibility: hidden;
+  pointer-events: none;
+}
+.x-spreadsheet-sheet.x-spreadsheet-sheet-chart-mode > .x-spreadsheet-scrollbar.horizontal {
+  display: none !important;
+}
+.x-spreadsheet-sheet.x-spreadsheet-sheet-chart-mode > .x-spreadsheet-resizer,
+.x-spreadsheet-sheet.x-spreadsheet-sheet-chart-mode > .x-spreadsheet-hover-highlight,
+.x-spreadsheet-sheet.x-spreadsheet-sheet-chart-mode > .x-spreadsheet-selector-dropdown-button,
+.x-spreadsheet-sheet.x-spreadsheet-sheet-chart-mode .x-spreadsheet-selectors,
+.x-spreadsheet-sheet.x-spreadsheet-sheet-chart-mode .x-spreadsheet-editor {
+  display: none !important;
+}
 .x-spreadsheet-workspace {
   display: grid;
   width: 100%;
+  min-height: 0;
   grid-template-columns: minmax(0, 1fr) 0;
   align-items: stretch;
   overflow: hidden;
@@ -30,6 +45,7 @@ body {
 }
 .x-spreadsheet-workspace-sheet-pane {
   min-width: 0;
+  min-height: 0;
   overflow: hidden;
 }
 .x-spreadsheet-workspace-sheet-pane > .x-spreadsheet-bottombar {
@@ -42,6 +58,7 @@ body {
   display: flex;
   width: 100%;
   min-width: 0;
+  min-height: 0;
   flex-direction: column;
   align-self: stretch;
   box-sizing: border-box;
@@ -65,6 +82,7 @@ body {
 }
 .x-spreadsheet-format-panel-header {
   display: flex;
+  flex: 0 0 52px;
   min-height: 52px;
   align-items: center;
   justify-content: space-between;
@@ -112,6 +130,7 @@ body {
 }
 .x-spreadsheet-format-panel-tabs {
   display: flex;
+  flex: 0 0 56px;
   min-height: 56px;
   align-items: stretch;
   justify-content: center;
@@ -154,11 +173,37 @@ body {
   background: #2f7d50;
 }
 .x-spreadsheet-format-panel-body {
-  flex: 1;
+  flex: 1 1 0;
+  height: 0;
+  min-height: 0;
   box-sizing: border-box;
-  overflow: auto;
+  padding-bottom: 24px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scroll-padding-bottom: 24px;
+  scrollbar-color: #a7adb5 #f3f4f6;
+  scrollbar-gutter: stable;
+  scrollbar-width: thin;
+  -webkit-overflow-scrolling: touch;
   background: #fff;
 }
+.x-spreadsheet-format-panel-body::-webkit-scrollbar {
+  width: 10px;
+}
+.x-spreadsheet-format-panel-body::-webkit-scrollbar-track {
+  background: #f3f4f6;
+}
+.x-spreadsheet-format-panel-body::-webkit-scrollbar-thumb {
+  background: #a7adb5;
+  background-clip: padding-box;
+  border: 2px solid #f3f4f6;
+  border-radius: 999px;
+}
+.x-spreadsheet-format-panel-body::-webkit-scrollbar-thumb:hover {
+  background: #858d97;
+  background-clip: padding-box;
+}
 .x-spreadsheet-format-panel-empty-title {
   margin: 24px 20px 6px;
   font-size: 14px;
@@ -268,6 +313,27 @@ body {
   flex-direction: column;
   gap: 10px;
 }
+.x-spreadsheet-format-panel-checkbox-field {
+  display: flex;
+  min-height: 30px;
+  align-items: center;
+  gap: 9px;
+  color: #374151;
+  font-size: 13px;
+  line-height: 18px;
+  cursor: pointer;
+}
+.x-spreadsheet-format-panel-checkbox {
+  width: 17px;
+  height: 17px;
+  flex: 0 0 auto;
+  margin: 0;
+  accent-color: #217346;
+}
+.x-spreadsheet-format-panel-checkbox:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
 .x-spreadsheet-format-panel-field {
   display: grid;
   min-width: 0;
@@ -306,6 +372,123 @@ body {
   margin: 14px 0;
   background: #d6d9dd;
 }
+.x-spreadsheet-format-panel-fill-editor {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.x-spreadsheet-format-panel-select {
+  width: 100%;
+  min-width: 0;
+  height: 36px;
+  box-sizing: border-box;
+  padding: 0 30px 0 10px;
+  color: #27313d;
+  font: inherit;
+  font-size: 13px;
+  background: #fff;
+  border: 1px solid #9aa1a9;
+  border-radius: 5px;
+}
+.x-spreadsheet-format-panel-select:hover:not(:disabled),
+.x-spreadsheet-format-panel-select:focus-visible {
+  border-color: #217346;
+  box-shadow: 0 0 0 2px rgba(33, 115, 70, 0.14);
+  outline: none;
+}
+.x-spreadsheet-format-panel-select:disabled {
+  color: #89939f;
+  background: #f1f3f5;
+  border-color: #d4d8dd;
+  cursor: not-allowed;
+}
+.x-spreadsheet-format-panel-texture-trigger {
+  display: inline-flex;
+  width: 82px;
+  height: 42px;
+  align-items: center;
+  justify-self: end;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: 4px 10px 4px 5px;
+  color: #27313d;
+  background: #fff;
+  border: 1px solid #8f969e;
+  border-radius: 6px;
+  cursor: pointer;
+}
+.x-spreadsheet-format-panel-texture-trigger:hover:not(:disabled),
+.x-spreadsheet-format-panel-texture-trigger:focus-visible {
+  border-color: #217346;
+  box-shadow: 0 0 0 2px rgba(33, 115, 70, 0.14);
+  outline: none;
+}
+.x-spreadsheet-format-panel-texture-trigger:disabled {
+  cursor: not-allowed;
+  opacity: 0.48;
+}
+.x-spreadsheet-format-panel-texture-trigger-preview,
+.x-spreadsheet-format-panel-texture-preview {
+  display: block;
+  flex: 0 0 auto;
+  background-image: url(d022c86edc5b2d12a8d3d4890df3bebb.jpg);
+  background-repeat: no-repeat;
+  background-size: 500% 500%;
+}
+.x-spreadsheet-format-panel-texture-trigger-preview {
+  width: 32px;
+  height: 32px;
+  border: 1px solid #c5c9ce;
+}
+.x-spreadsheet-format-panel-texture-trigger-arrow {
+  width: 7px;
+  height: 7px;
+  border-right: 1.5px solid currentColor;
+  border-bottom: 1.5px solid currentColor;
+  transform: translateY(-2px) rotate(45deg);
+}
+.x-spreadsheet-format-panel-texture-gallery {
+  display: none;
+  grid-template-columns: repeat(5, 64px);
+  gap: 4px;
+  box-sizing: border-box;
+  padding: 8px;
+  background: #fff;
+  border: 1px solid #8f969e;
+  border-radius: 6px;
+  box-shadow: 0 10px 28px rgba(31, 42, 55, 0.24);
+}
+.x-spreadsheet-format-panel-texture-option {
+  width: 64px;
+  height: 64px;
+  box-sizing: border-box;
+  padding: 2px;
+  background: #fff;
+  border: 1px solid transparent;
+  border-radius: 2px;
+  cursor: pointer;
+}
+.x-spreadsheet-format-panel-texture-option:hover,
+.x-spreadsheet-format-panel-texture-option:focus-visible {
+  border-color: #66707a;
+  outline: none;
+}
+.x-spreadsheet-format-panel-texture-option.x-spreadsheet-format-panel-texture-option-selected {
+  border-color: #217346;
+  box-shadow: inset 0 0 0 1px #217346;
+}
+.x-spreadsheet-format-panel-texture-preview {
+  width: 58px;
+  height: 58px;
+}
+.x-spreadsheet-format-panel-unsupported-fill {
+  padding: 9px 10px;
+  color: #5f6874;
+  font-size: 12px;
+  line-height: 18px;
+  background: #f6f7f8;
+  border-radius: 4px;
+}
 .x-spreadsheet-format-panel-label {
   min-width: 0;
   color: #374151;
@@ -378,6 +561,69 @@ body {
 .x-spreadsheet-format-panel-color-control {
   justify-self: end;
 }
+.x-spreadsheet-format-panel-transparency-control {
+  display: grid;
+  min-width: 0;
+  grid-template-columns: minmax(58px, 1fr) 82px;
+  align-items: center;
+  gap: 8px;
+}
+.x-spreadsheet-format-panel-transparency-range {
+  width: 100%;
+  min-width: 0;
+  accent-color: #217346;
+  cursor: pointer;
+}
+.x-spreadsheet-format-panel-transparency-range:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.x-spreadsheet-format-panel-percent-control {
+  width: 82px;
+  min-width: 0;
+}
+.x-spreadsheet-format-panel-pattern-label {
+  color: #374151;
+  font-size: 13px;
+  line-height: 18px;
+}
+.x-spreadsheet-format-panel-pattern-gallery {
+  display: grid;
+  grid-template-columns: repeat(6, 34px);
+  gap: 5px;
+}
+.x-spreadsheet-format-panel-pattern-button {
+  display: inline-flex;
+  width: 34px;
+  height: 30px;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: 1px;
+  overflow: hidden;
+  background: #fff;
+  border: 1px solid transparent;
+  border-radius: 2px;
+  cursor: pointer;
+}
+.x-spreadsheet-format-panel-pattern-button:hover:not(:disabled),
+.x-spreadsheet-format-panel-pattern-button:focus-visible {
+  border-color: #7c8794;
+  outline: none;
+}
+.x-spreadsheet-format-panel-pattern-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.48;
+}
+.x-spreadsheet-format-panel-pattern-button-selected {
+  border-color: #217346;
+  box-shadow: 0 0 0 1px #217346;
+}
+.x-spreadsheet-format-panel-pattern-preview {
+  display: block;
+  width: 30px;
+  height: 24px;
+}
 .x-spreadsheet-format-panel-color-button {
   display: inline-flex;
   width: 72px;
@@ -454,6 +700,9 @@ body {
   .x-spreadsheet-format-panel-color-control {
     justify-self: start;
   }
+  .x-spreadsheet-format-panel-transparency-control {
+    width: 100%;
+  }
   .x-spreadsheet-format-panel-error {
     grid-column: 1;
   }
@@ -2581,11 +2830,27 @@ form fieldset select {
   display: inline-block;
 }
 .x-spreadsheet-icon .x-spreadsheet-icon-img {
-  background-image: url(9667af4182f3e39eec9844c10e1a6eb8.svg);
+  background-image: url(2540ca97f0253f1cda1c125495bb90fe.svg);
   position: absolute;
   width: 262px;
   height: 444px;
   opacity: 0.86;
+  /*
+    // Search & Redact icon (text-based, no sprite dependency)
+    &.searchRedact {
+      background-image: none;
+      width: auto;
+      height: auto;
+      &::before {
+        content: '🔍';
+        font-size: 14px;
+        line-height: 18px;
+        color: #555;
+        display: block;
+        text-align: center;
+      }
+    }
+      */
 }
 .x-spreadsheet-icon .x-spreadsheet-icon-img.undo {
   left: 0;
@@ -2717,6 +2982,10 @@ form fieldset select {
   display: block;
   text-align: center;
 }
+.x-spreadsheet-icon .x-spreadsheet-icon-img.searchRedact {
+  left: -180px;
+  top: -126px;
+}
 .x-spreadsheet-icon .x-spreadsheet-icon-img.autofilter {
   left: -90px;
   top: -18px;