@visactor/vtable-search 0.20.4-alpha.3

package/README.md

@@ -0,0 +1,97 @@
+<div align="center">
+  <a href="" target="_blank">
+    <img alt="VisActor Logo" width="200" src="https://github.com/VisActor/.github/blob/main/profile/500_200.svg"/>
+  </a>
+</div>
+
+<div align="center">
+  <h1>VTable-Export</h1>
+</div>
+
+<div align="center">
+
+VTable is not just a high-performance multidimensional data analysis table, but also a grid artist that creates art between rows and columns.React-VTable is a React wrapper of VTable.
+
+[![npm Version](https://img.shields.io/npm/v/@visactor/vtable.svg)](https://www.npmjs.com/package/@visactor/react-vtable)
+[![npm Download](https://img.shields.io/npm/dm/@visactor/vtable.svg)](https://www.npmjs.com/package/@visactor/react-vvtable)
+[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/visactor/vtable/blob/main/LICENSE)
+
+</div>
+
+# Usage
+
+## Installation
+
+[npm package](https://www.npmjs.com/package/@visactor/vtable-export)
+
+```bash
+// npm
+npm install @visactor/vtable-export
+
+// yarn
+yarn add @visactor/vtable-export
+```
+
+## Quick Start
+
+```jsx
+import * as VTable from '@visactor/vtable';
+import { downloadCsv, exportVTableToCsv, downloadExcel, exportVTableToExcel } from '@visactor/vtable-export';
+
+const option = {
+  header: [
+    {
+      field: "0",
+      caption: "name",
+    },
+    {
+      field: "1",
+      caption: "age",
+    },
+    {
+      field: "2",
+      caption: "gender",
+    },
+    {
+      field: "3",
+      caption: "hobby",
+    },
+  ],
+  records: new Array(1000).fill(["John", 18, "male", "🏀"]),
+};
+
+const tableInstance = new VTable.ListTable(option);
+
+// donload csv file
+downloadCsv(exportVTableToCsv(tableInstance), 'export-csv');
+
+// donload excel file
+downloadExcel(await exportVTableToExcel(tableInstance), 'export-excel');
+
+```
+
+##
+
+[More demos and detailed tutorials](https://visactor.io/vtable)
+
+# Related Links
+
+- [Official website](https://visactor.io/vtable)
+
+# Ecosystem
+
+| Project                                                     | Description                                                                            |
+| ----------------------------------------------------------- | -------------------------------------------------------------------------------------- |
+| [AI-generated Components](https://visactor.io/ai-vtable)    | AI-generated table component.                                                          |
+
+# Contribution
+
+If you would like to contribute, please read the [Code of Conduct ](./CODE_OF_CONDUCT.md) 和 [ Guide](./CONTRIBUTING.zh-CN.md) first。
+
+Small streams converge to make great rivers and seas!
+
+<a href="https://github.com/visactor/vtable/graphs/contributors"><img src="https://contrib.rocks/image?repo=visactor/vtable" /></a>
+
+# License
+
+[MIT License](./LICENSE)

package/cjs/index.d.ts

@@ -0,0 +1 @@
+export * from './search-component';

package/cjs/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var __createBinding = this && this.__createBinding || (Object.create ? function(o, m, k, k2) {
+    void 0 === k2 && (k2 = k);
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    desc && !("get" in desc ? !m.__esModule : desc.writable || desc.configurable) || (desc = {
+        enumerable: !0,
+        get: function() {
+            return m[k];
+        }
+    }), Object.defineProperty(o, k2, desc);
+} : function(o, m, k, k2) {
+    void 0 === k2 && (k2 = k), o[k2] = m[k];
+}), __exportStar = this && this.__exportStar || function(m, exports) {
+    for (var p in m) "default" === p || Object.prototype.hasOwnProperty.call(exports, p) || __createBinding(exports, m, p);
+};
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), __exportStar(require("./search-component"), exports);

package/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,qDAAmC","file":"index.js","sourcesContent":["export * from './search-component';\n"]}

package/cjs/search-component/index.d.ts

@@ -0,0 +1 @@
+export * from './search-component';

package/cjs/search-component/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var __createBinding = this && this.__createBinding || (Object.create ? function(o, m, k, k2) {
+    void 0 === k2 && (k2 = k);
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    desc && !("get" in desc ? !m.__esModule : desc.writable || desc.configurable) || (desc = {
+        enumerable: !0,
+        get: function() {
+            return m[k];
+        }
+    }), Object.defineProperty(o, k2, desc);
+} : function(o, m, k, k2) {
+    void 0 === k2 && (k2 = k), o[k2] = m[k];
+}), __exportStar = this && this.__exportStar || function(m, exports) {
+    for (var p in m) "default" === p || Object.prototype.hasOwnProperty.call(exports, p) || __createBinding(exports, m, p);
+};
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), __exportStar(require("./search-component"), exports);
+//# sourceMappingURL=index.js.map

package/cjs/search-component/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["search-component/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,qDAAmC","file":"index.js","sourcesContent":["export * from './search-component';\n"]}

package/cjs/search-component/search-component.d.ts

@@ -0,0 +1,72 @@
+import type * as VTable from '@visactor/vtable';
+type IVTable = VTable.ListTable | VTable.PivotTable | VTable.PivotChart;
+export type QueryResult = {
+    queryStr: string;
+    results: {
+        col: number;
+        row: number;
+        value: string;
+    }[];
+};
+export type SearchComponentOption = {
+    table: IVTable;
+    autoJump?: boolean;
+    skipHeader?: boolean;
+    highlightCellStyle?: VTable.TYPES.CellStyle;
+    focuseHighlightCellStyle?: VTable.TYPES.CellStyle;
+    queryMethod?: (queryStr: string, value: string, option?: {
+        col: number;
+        row: number;
+        table: IVTable;
+    }) => boolean;
+    callback?: (queryResult: QueryResult, table: IVTable) => void;
+};
+export declare class SearchComponent {
+    table: IVTable;
+    skipHeader: boolean;
+    autoJump: boolean;
+    highlightCellStyle: Partial<VTable.TYPES.CellStyle>;
+    focuseHighlightCellStyle: Partial<VTable.TYPES.CellStyle>;
+    queryMethod: (queryStr: string, value: string, option: {
+        col: number;
+        row: number;
+        table: IVTable;
+    }) => boolean;
+    callback?: (queryResult: QueryResult, table: IVTable) => void;
+    queryStr: string;
+    queryResult: {
+        col: number;
+        row: number;
+        value: string;
+    }[];
+    currentIndex: number;
+    constructor(option: SearchComponentOption);
+    search(str: string): {
+        index: number;
+        results: {
+            col: number;
+            row: number;
+            value: string;
+        }[];
+    };
+    updateCellStyle(highlight?: boolean): void;
+    next(): {
+        index: number;
+        results: {
+            col: number;
+            row: number;
+            value: string;
+        }[];
+    };
+    prev(): {
+        index: number;
+        results: {
+            col: number;
+            row: number;
+            value: string;
+        }[];
+    };
+    jumpToCell(col: number, row: number): void;
+    clear(): void;
+}
+export {};

package/cjs/search-component/search-component.js

@@ -0,0 +1,110 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.SearchComponent = void 0;
+
+const defalutHightlightCellStyle = {
+    bgColor: "rgba(255, 255, 0, 0.2)"
+}, defalutFocusHightlightCellStyle = {
+    bgColor: "rgba(255, 155, 0, 0.2)"
+};
+
+function defalultQueryMethod(queryStr, value) {
+    return value.toString().includes(queryStr);
+}
+
+class SearchComponent {
+    constructor(option) {
+        this.table = option.table, this.autoJump = option.autoJump || !1, this.skipHeader = option.skipHeader || !1, 
+        this.highlightCellStyle = option.highlightCellStyle || defalutHightlightCellStyle, 
+        this.focuseHighlightCellStyle = option.focuseHighlightCellStyle || defalutFocusHightlightCellStyle, 
+        this.queryMethod = option.queryMethod || defalultQueryMethod, this.callback = option.callback, 
+        this.table.registerCustomCellStyle("__search_component_highlight", this.highlightCellStyle), 
+        this.table.registerCustomCellStyle("__search_component_focuse", this.focuseHighlightCellStyle);
+    }
+    search(str) {
+        if (this.clear(), this.queryStr = str, !str) return {
+            index: 0,
+            results: this.queryResult
+        };
+        for (let row = 0; row < this.table.rowCount; row++) for (let col = 0; col < this.table.colCount; col++) {
+            if (this.skipHeader && this.table.isHeader(col, row)) continue;
+            const value = this.table.getCellValue(col, row);
+            this.queryMethod(this.queryStr, value, {
+                col: col,
+                row: row,
+                table: this.table
+            }) && this.queryResult.push({
+                col: col,
+                row: row,
+                value: value
+            });
+        }
+        return this.updateCellStyle(), this.callback && this.callback({
+            queryStr: this.queryStr,
+            results: this.queryResult
+        }, this.table), this.autoJump ? this.next() : {
+            index: 0,
+            results: this.queryResult
+        };
+    }
+    updateCellStyle(highlight = !0) {
+        if (this.queryResult) for (let i = 0; i < this.queryResult.length; i++) {
+            const {col: col, row: row} = this.queryResult[i];
+            this.table.arrangeCustomCellStyle({
+                col: col,
+                row: row
+            }, highlight ? "__search_component_highlight" : null);
+        }
+    }
+    next() {
+        if (!this.queryResult.length) return {
+            index: 0,
+            results: this.queryResult
+        };
+        -1 !== this.currentIndex && this.table.arrangeCustomCellStyle({
+            col: this.queryResult[this.currentIndex].col,
+            row: this.queryResult[this.currentIndex].row
+        }, "__search_component_highlight"), this.currentIndex++, this.currentIndex >= this.queryResult.length && (this.currentIndex = 0);
+        const {col: col, row: row} = this.queryResult[this.currentIndex];
+        return this.table.arrangeCustomCellStyle({
+            col: col,
+            row: row
+        }, "__search_component_focuse"), this.jumpToCell(col, row), {
+            index: this.currentIndex,
+            results: this.queryResult
+        };
+    }
+    prev() {
+        if (!this.queryResult.length) return {
+            index: 0,
+            results: this.queryResult
+        };
+        -1 !== this.currentIndex && this.table.arrangeCustomCellStyle({
+            col: this.queryResult[this.currentIndex].col,
+            row: this.queryResult[this.currentIndex].row
+        }, "__search_component_highlight"), this.currentIndex--, this.currentIndex < 0 && (this.currentIndex = this.queryResult.length - 1);
+        const {col: col, row: row} = this.queryResult[this.currentIndex];
+        return this.table.arrangeCustomCellStyle({
+            col: col,
+            row: row
+        }, "__search_component_focuse"), this.jumpToCell(col, row), {
+            index: this.currentIndex,
+            results: this.queryResult
+        };
+    }
+    jumpToCell(col, row) {
+        const {rowStart: rowStart, rowEnd: rowEnd} = this.table.getBodyVisibleRowRange(), {colStart: colStart, colEnd: colEnd} = this.table.getBodyVisibleColRange();
+        (row <= rowStart || row >= rowEnd || col <= colStart || col >= colEnd) && this.table.scrollToCell({
+            col: col,
+            row: row
+        });
+    }
+    clear() {
+        this.updateCellStyle(null), this.queryStr = "", this.queryResult = [], this.currentIndex = -1;
+    }
+}
+
+exports.SearchComponent = SearchComponent;
+//# sourceMappingURL=search-component.js.map

package/cjs/search-component/search-component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["search-component/search-component.ts"],"names":[],"mappings":"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","file":"search-component.js","sourcesContent":["import type * as VTable from '@visactor/vtable';\n\ntype IVTable = VTable.ListTable | VTable.PivotTable | VTable.PivotChart;\n\nexport type QueryResult = {\n  queryStr: string;\n  results: {\n    col: number;\n    row: number;\n    value: string;\n  }[];\n};\n\nexport type SearchComponentOption = {\n  table: IVTable;\n  autoJump?: boolean;\n  skipHeader?: boolean;\n  highlightCellStyle?: VTable.TYPES.CellStyle;\n  focuseHighlightCellStyle?: VTable.TYPES.CellStyle;\n  queryMethod?: (queryStr: string, value: string, option?: { col: number; row: number; table: IVTable }) => boolean;\n  callback?: (queryResult: QueryResult, table: IVTable) => void;\n};\n\nconst defalutHightlightCellStyle: Partial<VTable.TYPES.CellStyle> = {\n  bgColor: 'rgba(255, 255, 0, 0.2)'\n};\n\nconst defalutFocusHightlightCellStyle: Partial<VTable.TYPES.CellStyle> = {\n  bgColor: 'rgba(255, 155, 0, 0.2)'\n};\n\nfunction defalultQueryMethod(queryStr: string, value: string) {\n  return value.toString().includes(queryStr);\n}\n\nexport class SearchComponent {\n  table: IVTable;\n  skipHeader: boolean;\n  autoJump: boolean;\n  highlightCellStyle: Partial<VTable.TYPES.CellStyle>;\n  focuseHighlightCellStyle: Partial<VTable.TYPES.CellStyle>;\n  queryMethod: (queryStr: string, value: string, option: { col: number; row: number; table: IVTable }) => boolean;\n  callback?: (queryResult: QueryResult, table: IVTable) => void;\n\n  queryStr: string;\n  queryResult: {\n    col: number;\n    row: number;\n    value: string;\n  }[];\n  currentIndex: number;\n\n  constructor(option: SearchComponentOption) {\n    this.table = option.table;\n    this.autoJump = option.autoJump || false;\n    this.skipHeader = option.skipHeader || false;\n    this.highlightCellStyle = option.highlightCellStyle || defalutHightlightCellStyle;\n    this.focuseHighlightCellStyle = option.focuseHighlightCellStyle || defalutFocusHightlightCellStyle;\n    this.queryMethod = option.queryMethod || defalultQueryMethod;\n    this.callback = option.callback;\n\n    this.table.registerCustomCellStyle('__search_component_highlight', this.highlightCellStyle as any);\n    this.table.registerCustomCellStyle('__search_component_focuse', this.focuseHighlightCellStyle as any);\n  }\n\n  search(str: string) {\n    this.clear();\n    this.queryStr = str;\n\n    if (!str) {\n      return {\n        index: 0,\n        results: this.queryResult\n      };\n    }\n\n    for (let row = 0; row < this.table.rowCount; row++) {\n      for (let col = 0; col < this.table.colCount; col++) {\n        if (this.skipHeader && this.table.isHeader(col, row)) {\n          continue;\n        }\n        const value = this.table.getCellValue(col, row);\n        if (this.queryMethod(this.queryStr, value, { col, row, table: this.table })) {\n          this.queryResult.push({\n            col,\n            row,\n            value\n          });\n        }\n      }\n    }\n\n    this.updateCellStyle();\n\n    if (this.callback) {\n      this.callback(\n        {\n          queryStr: this.queryStr,\n          results: this.queryResult\n        },\n        this.table\n      );\n    }\n\n    if (this.autoJump) {\n      return this.next();\n    }\n    return {\n      index: 0,\n      results: this.queryResult\n    };\n  }\n\n  updateCellStyle(highlight: boolean = true) {\n    if (!this.queryResult) {\n      return;\n    }\n    for (let i = 0; i < this.queryResult.length; i++) {\n      const { col, row } = this.queryResult[i];\n      this.table.arrangeCustomCellStyle(\n        {\n          col,\n          row\n        },\n        highlight ? '__search_component_highlight' : null\n      );\n    }\n  }\n\n  next() {\n    if (!this.queryResult.length) {\n      return {\n        index: 0,\n        results: this.queryResult\n      };\n    }\n    if (this.currentIndex !== -1) {\n      // reset last focus\n      this.table.arrangeCustomCellStyle(\n        {\n          col: this.queryResult[this.currentIndex].col,\n          row: this.queryResult[this.currentIndex].row\n        },\n        '__search_component_highlight'\n      );\n    }\n    this.currentIndex++;\n    if (this.currentIndex >= this.queryResult.length) {\n      this.currentIndex = 0;\n    }\n    const { col, row } = this.queryResult[this.currentIndex];\n    this.table.arrangeCustomCellStyle({ col, row }, '__search_component_focuse');\n\n    this.jumpToCell(col, row);\n\n    return {\n      index: this.currentIndex,\n      results: this.queryResult\n    };\n  }\n\n  prev() {\n    if (!this.queryResult.length) {\n      return {\n        index: 0,\n        results: this.queryResult\n      };\n    }\n    if (this.currentIndex !== -1) {\n      // reset last focus\n      this.table.arrangeCustomCellStyle(\n        {\n          col: this.queryResult[this.currentIndex].col,\n          row: this.queryResult[this.currentIndex].row\n        },\n        '__search_component_highlight'\n      );\n    }\n    this.currentIndex--;\n    if (this.currentIndex < 0) {\n      this.currentIndex = this.queryResult.length - 1;\n    }\n    const { col, row } = this.queryResult[this.currentIndex];\n    this.table.arrangeCustomCellStyle({ col, row }, '__search_component_focuse');\n\n    this.jumpToCell(col, row);\n\n    return {\n      index: this.currentIndex,\n      results: this.queryResult\n    };\n  }\n\n  jumpToCell(col: number, row: number) {\n    // if focus cell out of screen, jump to cell\n    const { rowStart, rowEnd } = this.table.getBodyVisibleRowRange();\n    const { colStart, colEnd } = this.table.getBodyVisibleColRange();\n    if (row <= rowStart || row >= rowEnd || col <= colStart || col >= colEnd) {\n      this.table.scrollToCell({ col, row });\n    }\n  }\n\n  clear() {\n    // reset highlight cell style\n    this.updateCellStyle(null);\n    this.queryStr = '';\n    this.queryResult = [];\n    this.currentIndex = -1;\n  }\n}\n"]}

package/dist/vtable-export.js

@@ -0,0 +1,156 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+    typeof define === 'function' && define.amd ? define(['exports'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.VTable = global.VTable || {}, global.VTable.export = {})));
+})(this, (function (exports) { 'use strict';
+
+    const defalutHightlightCellStyle = {
+        bgColor: 'rgba(255, 255, 0, 0.2)'
+    };
+    const defalutFocusHightlightCellStyle = {
+        bgColor: 'rgba(255, 155, 0, 0.2)'
+    };
+    function defalultQueryMethod(queryStr, value) {
+        return value.toString().includes(queryStr);
+    }
+    class SearchComponent {
+        table;
+        skipHeader;
+        autoJump;
+        highlightCellStyle;
+        focuseHighlightCellStyle;
+        queryMethod;
+        callback;
+        queryStr;
+        queryResult;
+        currentIndex;
+        constructor(option) {
+            this.table = option.table;
+            this.autoJump = option.autoJump || false;
+            this.skipHeader = option.skipHeader || false;
+            this.highlightCellStyle = option.highlightCellStyle || defalutHightlightCellStyle;
+            this.focuseHighlightCellStyle = option.focuseHighlightCellStyle || defalutFocusHightlightCellStyle;
+            this.queryMethod = option.queryMethod || defalultQueryMethod;
+            this.callback = option.callback;
+            this.table.registerCustomCellStyle('__search_component_highlight', this.highlightCellStyle);
+            this.table.registerCustomCellStyle('__search_component_focuse', this.focuseHighlightCellStyle);
+        }
+        search(str) {
+            this.clear();
+            this.queryStr = str;
+            if (!str) {
+                return {
+                    index: 0,
+                    results: this.queryResult
+                };
+            }
+            for (let row = 0; row < this.table.rowCount; row++) {
+                for (let col = 0; col < this.table.colCount; col++) {
+                    if (this.skipHeader && this.table.isHeader(col, row)) {
+                        continue;
+                    }
+                    const value = this.table.getCellValue(col, row);
+                    if (this.queryMethod(this.queryStr, value, { col, row, table: this.table })) {
+                        this.queryResult.push({
+                            col,
+                            row,
+                            value
+                        });
+                    }
+                }
+            }
+            this.updateCellStyle();
+            if (this.callback) {
+                this.callback({
+                    queryStr: this.queryStr,
+                    results: this.queryResult
+                }, this.table);
+            }
+            if (this.autoJump) {
+                return this.next();
+            }
+            return {
+                index: 0,
+                results: this.queryResult
+            };
+        }
+        updateCellStyle(highlight = true) {
+            if (!this.queryResult) {
+                return;
+            }
+            for (let i = 0; i < this.queryResult.length; i++) {
+                const { col, row } = this.queryResult[i];
+                this.table.arrangeCustomCellStyle({
+                    col,
+                    row
+                }, highlight ? '__search_component_highlight' : null);
+            }
+        }
+        next() {
+            if (!this.queryResult.length) {
+                return {
+                    index: 0,
+                    results: this.queryResult
+                };
+            }
+            if (this.currentIndex !== -1) {
+                this.table.arrangeCustomCellStyle({
+                    col: this.queryResult[this.currentIndex].col,
+                    row: this.queryResult[this.currentIndex].row
+                }, '__search_component_highlight');
+            }
+            this.currentIndex++;
+            if (this.currentIndex >= this.queryResult.length) {
+                this.currentIndex = 0;
+            }
+            const { col, row } = this.queryResult[this.currentIndex];
+            this.table.arrangeCustomCellStyle({ col, row }, '__search_component_focuse');
+            this.jumpToCell(col, row);
+            return {
+                index: this.currentIndex,
+                results: this.queryResult
+            };
+        }
+        prev() {
+            if (!this.queryResult.length) {
+                return {
+                    index: 0,
+                    results: this.queryResult
+                };
+            }
+            if (this.currentIndex !== -1) {
+                this.table.arrangeCustomCellStyle({
+                    col: this.queryResult[this.currentIndex].col,
+                    row: this.queryResult[this.currentIndex].row
+                }, '__search_component_highlight');
+            }
+            this.currentIndex--;
+            if (this.currentIndex < 0) {
+                this.currentIndex = this.queryResult.length - 1;
+            }
+            const { col, row } = this.queryResult[this.currentIndex];
+            this.table.arrangeCustomCellStyle({ col, row }, '__search_component_focuse');
+            this.jumpToCell(col, row);
+            return {
+                index: this.currentIndex,
+                results: this.queryResult
+            };
+        }
+        jumpToCell(col, row) {
+            const { rowStart, rowEnd } = this.table.getBodyVisibleRowRange();
+            const { colStart, colEnd } = this.table.getBodyVisibleColRange();
+            if (row <= rowStart || row >= rowEnd || col <= colStart || col >= colEnd) {
+                this.table.scrollToCell({ col, row });
+            }
+        }
+        clear() {
+            this.updateCellStyle(null);
+            this.queryStr = '';
+            this.queryResult = [];
+            this.currentIndex = -1;
+        }
+    }
+
+    exports.SearchComponent = SearchComponent;
+
+}));

package/dist/vtable-export.min.js

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self).VTable=e.VTable||{},e.VTable.export={}))}(this,(function(e){"use strict";const t={bgColor:"rgba(255, 255, 0, 0.2)"},l={bgColor:"rgba(255, 155, 0, 0.2)"};function s(e,t){return t.toString().includes(e)}e.SearchComponent=class{table;skipHeader;autoJump;highlightCellStyle;focuseHighlightCellStyle;queryMethod;callback;queryStr;queryResult;currentIndex;constructor(e){this.table=e.table,this.autoJump=e.autoJump||!1,this.skipHeader=e.skipHeader||!1,this.highlightCellStyle=e.highlightCellStyle||t,this.focuseHighlightCellStyle=e.focuseHighlightCellStyle||l,this.queryMethod=e.queryMethod||s,this.callback=e.callback,this.table.registerCustomCellStyle("__search_component_highlight",this.highlightCellStyle),this.table.registerCustomCellStyle("__search_component_focuse",this.focuseHighlightCellStyle)}search(e){if(this.clear(),this.queryStr=e,!e)return{index:0,results:this.queryResult};for(let e=0;e<this.table.rowCount;e++)for(let t=0;t<this.table.colCount;t++){if(this.skipHeader&&this.table.isHeader(t,e))continue;const l=this.table.getCellValue(t,e);this.queryMethod(this.queryStr,l,{col:t,row:e,table:this.table})&&this.queryResult.push({col:t,row:e,value:l})}return this.updateCellStyle(),this.callback&&this.callback({queryStr:this.queryStr,results:this.queryResult},this.table),this.autoJump?this.next():{index:0,results:this.queryResult}}updateCellStyle(e=!0){if(this.queryResult)for(let t=0;t<this.queryResult.length;t++){const{col:l,row:s}=this.queryResult[t];this.table.arrangeCustomCellStyle({col:l,row:s},e?"__search_component_highlight":null)}}next(){if(!this.queryResult.length)return{index:0,results:this.queryResult};-1!==this.currentIndex&&this.table.arrangeCustomCellStyle({col:this.queryResult[this.currentIndex].col,row:this.queryResult[this.currentIndex].row},"__search_component_highlight"),this.currentIndex++,this.currentIndex>=this.queryResult.length&&(this.currentIndex=0);const{col:e,row:t}=this.queryResult[this.currentIndex];return this.table.arrangeCustomCellStyle({col:e,row:t},"__search_component_focuse"),this.jumpToCell(e,t),{index:this.currentIndex,results:this.queryResult}}prev(){if(!this.queryResult.length)return{index:0,results:this.queryResult};-1!==this.currentIndex&&this.table.arrangeCustomCellStyle({col:this.queryResult[this.currentIndex].col,row:this.queryResult[this.currentIndex].row},"__search_component_highlight"),this.currentIndex--,this.currentIndex<0&&(this.currentIndex=this.queryResult.length-1);const{col:e,row:t}=this.queryResult[this.currentIndex];return this.table.arrangeCustomCellStyle({col:e,row:t},"__search_component_focuse"),this.jumpToCell(e,t),{index:this.currentIndex,results:this.queryResult}}jumpToCell(e,t){const{rowStart:l,rowEnd:s}=this.table.getBodyVisibleRowRange(),{colStart:r,colEnd:i}=this.table.getBodyVisibleColRange();(t<=l||t>=s||e<=r||e>=i)&&this.table.scrollToCell({col:e,row:t})}clear(){this.updateCellStyle(null),this.queryStr="",this.queryResult=[],this.currentIndex=-1}}}));

package/es/index.d.ts

@@ -0,0 +1 @@
+export * from './search-component';

package/es/index.js

@@ -0,0 +1 @@
+export * from "./search-component";

package/es/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC","file":"index.js","sourcesContent":["export * from './search-component';\n"]}

package/es/search-component/index.d.ts

@@ -0,0 +1 @@
+export * from './search-component';

package/es/search-component/index.js

@@ -0,0 +1,2 @@
+export * from "./search-component";
+//# sourceMappingURL=index.js.map

package/es/search-component/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["search-component/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC","file":"index.js","sourcesContent":["export * from './search-component';\n"]}

package/es/search-component/search-component.d.ts

@@ -0,0 +1,72 @@
+import type * as VTable from '@visactor/vtable';
+type IVTable = VTable.ListTable | VTable.PivotTable | VTable.PivotChart;
+export type QueryResult = {
+    queryStr: string;
+    results: {
+        col: number;
+        row: number;
+        value: string;
+    }[];
+};
+export type SearchComponentOption = {
+    table: IVTable;
+    autoJump?: boolean;
+    skipHeader?: boolean;
+    highlightCellStyle?: VTable.TYPES.CellStyle;
+    focuseHighlightCellStyle?: VTable.TYPES.CellStyle;
+    queryMethod?: (queryStr: string, value: string, option?: {
+        col: number;
+        row: number;
+        table: IVTable;
+    }) => boolean;
+    callback?: (queryResult: QueryResult, table: IVTable) => void;
+};
+export declare class SearchComponent {
+    table: IVTable;
+    skipHeader: boolean;
+    autoJump: boolean;
+    highlightCellStyle: Partial<VTable.TYPES.CellStyle>;
+    focuseHighlightCellStyle: Partial<VTable.TYPES.CellStyle>;
+    queryMethod: (queryStr: string, value: string, option: {
+        col: number;
+        row: number;
+        table: IVTable;
+    }) => boolean;
+    callback?: (queryResult: QueryResult, table: IVTable) => void;
+    queryStr: string;
+    queryResult: {
+        col: number;
+        row: number;
+        value: string;
+    }[];
+    currentIndex: number;
+    constructor(option: SearchComponentOption);
+    search(str: string): {
+        index: number;
+        results: {
+            col: number;
+            row: number;
+            value: string;
+        }[];
+    };
+    updateCellStyle(highlight?: boolean): void;
+    next(): {
+        index: number;
+        results: {
+            col: number;
+            row: number;
+            value: string;
+        }[];
+    };
+    prev(): {
+        index: number;
+        results: {
+            col: number;
+            row: number;
+            value: string;
+        }[];
+    };
+    jumpToCell(col: number, row: number): void;
+    clear(): void;
+}
+export {};

package/es/search-component/search-component.js

@@ -0,0 +1,102 @@
+const defalutHightlightCellStyle = {
+    bgColor: "rgba(255, 255, 0, 0.2)"
+}, defalutFocusHightlightCellStyle = {
+    bgColor: "rgba(255, 155, 0, 0.2)"
+};
+
+function defalultQueryMethod(queryStr, value) {
+    return value.toString().includes(queryStr);
+}
+
+export class SearchComponent {
+    constructor(option) {
+        this.table = option.table, this.autoJump = option.autoJump || !1, this.skipHeader = option.skipHeader || !1, 
+        this.highlightCellStyle = option.highlightCellStyle || defalutHightlightCellStyle, 
+        this.focuseHighlightCellStyle = option.focuseHighlightCellStyle || defalutFocusHightlightCellStyle, 
+        this.queryMethod = option.queryMethod || defalultQueryMethod, this.callback = option.callback, 
+        this.table.registerCustomCellStyle("__search_component_highlight", this.highlightCellStyle), 
+        this.table.registerCustomCellStyle("__search_component_focuse", this.focuseHighlightCellStyle);
+    }
+    search(str) {
+        if (this.clear(), this.queryStr = str, !str) return {
+            index: 0,
+            results: this.queryResult
+        };
+        for (let row = 0; row < this.table.rowCount; row++) for (let col = 0; col < this.table.colCount; col++) {
+            if (this.skipHeader && this.table.isHeader(col, row)) continue;
+            const value = this.table.getCellValue(col, row);
+            this.queryMethod(this.queryStr, value, {
+                col: col,
+                row: row,
+                table: this.table
+            }) && this.queryResult.push({
+                col: col,
+                row: row,
+                value: value
+            });
+        }
+        return this.updateCellStyle(), this.callback && this.callback({
+            queryStr: this.queryStr,
+            results: this.queryResult
+        }, this.table), this.autoJump ? this.next() : {
+            index: 0,
+            results: this.queryResult
+        };
+    }
+    updateCellStyle(highlight = !0) {
+        if (this.queryResult) for (let i = 0; i < this.queryResult.length; i++) {
+            const {col: col, row: row} = this.queryResult[i];
+            this.table.arrangeCustomCellStyle({
+                col: col,
+                row: row
+            }, highlight ? "__search_component_highlight" : null);
+        }
+    }
+    next() {
+        if (!this.queryResult.length) return {
+            index: 0,
+            results: this.queryResult
+        };
+        -1 !== this.currentIndex && this.table.arrangeCustomCellStyle({
+            col: this.queryResult[this.currentIndex].col,
+            row: this.queryResult[this.currentIndex].row
+        }, "__search_component_highlight"), this.currentIndex++, this.currentIndex >= this.queryResult.length && (this.currentIndex = 0);
+        const {col: col, row: row} = this.queryResult[this.currentIndex];
+        return this.table.arrangeCustomCellStyle({
+            col: col,
+            row: row
+        }, "__search_component_focuse"), this.jumpToCell(col, row), {
+            index: this.currentIndex,
+            results: this.queryResult
+        };
+    }
+    prev() {
+        if (!this.queryResult.length) return {
+            index: 0,
+            results: this.queryResult
+        };
+        -1 !== this.currentIndex && this.table.arrangeCustomCellStyle({
+            col: this.queryResult[this.currentIndex].col,
+            row: this.queryResult[this.currentIndex].row
+        }, "__search_component_highlight"), this.currentIndex--, this.currentIndex < 0 && (this.currentIndex = this.queryResult.length - 1);
+        const {col: col, row: row} = this.queryResult[this.currentIndex];
+        return this.table.arrangeCustomCellStyle({
+            col: col,
+            row: row
+        }, "__search_component_focuse"), this.jumpToCell(col, row), {
+            index: this.currentIndex,
+            results: this.queryResult
+        };
+    }
+    jumpToCell(col, row) {
+        const {rowStart: rowStart, rowEnd: rowEnd} = this.table.getBodyVisibleRowRange(), {colStart: colStart, colEnd: colEnd} = this.table.getBodyVisibleColRange();
+        (row <= rowStart || row >= rowEnd || col <= colStart || col >= colEnd) && this.table.scrollToCell({
+            col: col,
+            row: row
+        });
+    }
+    clear() {
+        this.updateCellStyle(null), this.queryStr = "", this.queryResult = [], this.currentIndex = -1;
+    }
+}
+//# sourceMappingURL=search-component.js.map

package/es/search-component/search-component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["search-component/search-component.ts"],"names":[],"mappings":"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","file":"search-component.js","sourcesContent":["import type * as VTable from '@visactor/vtable';\n\ntype IVTable = VTable.ListTable | VTable.PivotTable | VTable.PivotChart;\n\nexport type QueryResult = {\n  queryStr: string;\n  results: {\n    col: number;\n    row: number;\n    value: string;\n  }[];\n};\n\nexport type SearchComponentOption = {\n  table: IVTable;\n  autoJump?: boolean;\n  skipHeader?: boolean;\n  highlightCellStyle?: VTable.TYPES.CellStyle;\n  focuseHighlightCellStyle?: VTable.TYPES.CellStyle;\n  queryMethod?: (queryStr: string, value: string, option?: { col: number; row: number; table: IVTable }) => boolean;\n  callback?: (queryResult: QueryResult, table: IVTable) => void;\n};\n\nconst defalutHightlightCellStyle: Partial<VTable.TYPES.CellStyle> = {\n  bgColor: 'rgba(255, 255, 0, 0.2)'\n};\n\nconst defalutFocusHightlightCellStyle: Partial<VTable.TYPES.CellStyle> = {\n  bgColor: 'rgba(255, 155, 0, 0.2)'\n};\n\nfunction defalultQueryMethod(queryStr: string, value: string) {\n  return value.toString().includes(queryStr);\n}\n\nexport class SearchComponent {\n  table: IVTable;\n  skipHeader: boolean;\n  autoJump: boolean;\n  highlightCellStyle: Partial<VTable.TYPES.CellStyle>;\n  focuseHighlightCellStyle: Partial<VTable.TYPES.CellStyle>;\n  queryMethod: (queryStr: string, value: string, option: { col: number; row: number; table: IVTable }) => boolean;\n  callback?: (queryResult: QueryResult, table: IVTable) => void;\n\n  queryStr: string;\n  queryResult: {\n    col: number;\n    row: number;\n    value: string;\n  }[];\n  currentIndex: number;\n\n  constructor(option: SearchComponentOption) {\n    this.table = option.table;\n    this.autoJump = option.autoJump || false;\n    this.skipHeader = option.skipHeader || false;\n    this.highlightCellStyle = option.highlightCellStyle || defalutHightlightCellStyle;\n    this.focuseHighlightCellStyle = option.focuseHighlightCellStyle || defalutFocusHightlightCellStyle;\n    this.queryMethod = option.queryMethod || defalultQueryMethod;\n    this.callback = option.callback;\n\n    this.table.registerCustomCellStyle('__search_component_highlight', this.highlightCellStyle as any);\n    this.table.registerCustomCellStyle('__search_component_focuse', this.focuseHighlightCellStyle as any);\n  }\n\n  search(str: string) {\n    this.clear();\n    this.queryStr = str;\n\n    if (!str) {\n      return {\n        index: 0,\n        results: this.queryResult\n      };\n    }\n\n    for (let row = 0; row < this.table.rowCount; row++) {\n      for (let col = 0; col < this.table.colCount; col++) {\n        if (this.skipHeader && this.table.isHeader(col, row)) {\n          continue;\n        }\n        const value = this.table.getCellValue(col, row);\n        if (this.queryMethod(this.queryStr, value, { col, row, table: this.table })) {\n          this.queryResult.push({\n            col,\n            row,\n            value\n          });\n        }\n      }\n    }\n\n    this.updateCellStyle();\n\n    if (this.callback) {\n      this.callback(\n        {\n          queryStr: this.queryStr,\n          results: this.queryResult\n        },\n        this.table\n      );\n    }\n\n    if (this.autoJump) {\n      return this.next();\n    }\n    return {\n      index: 0,\n      results: this.queryResult\n    };\n  }\n\n  updateCellStyle(highlight: boolean = true) {\n    if (!this.queryResult) {\n      return;\n    }\n    for (let i = 0; i < this.queryResult.length; i++) {\n      const { col, row } = this.queryResult[i];\n      this.table.arrangeCustomCellStyle(\n        {\n          col,\n          row\n        },\n        highlight ? '__search_component_highlight' : null\n      );\n    }\n  }\n\n  next() {\n    if (!this.queryResult.length) {\n      return {\n        index: 0,\n        results: this.queryResult\n      };\n    }\n    if (this.currentIndex !== -1) {\n      // reset last focus\n      this.table.arrangeCustomCellStyle(\n        {\n          col: this.queryResult[this.currentIndex].col,\n          row: this.queryResult[this.currentIndex].row\n        },\n        '__search_component_highlight'\n      );\n    }\n    this.currentIndex++;\n    if (this.currentIndex >= this.queryResult.length) {\n      this.currentIndex = 0;\n    }\n    const { col, row } = this.queryResult[this.currentIndex];\n    this.table.arrangeCustomCellStyle({ col, row }, '__search_component_focuse');\n\n    this.jumpToCell(col, row);\n\n    return {\n      index: this.currentIndex,\n      results: this.queryResult\n    };\n  }\n\n  prev() {\n    if (!this.queryResult.length) {\n      return {\n        index: 0,\n        results: this.queryResult\n      };\n    }\n    if (this.currentIndex !== -1) {\n      // reset last focus\n      this.table.arrangeCustomCellStyle(\n        {\n          col: this.queryResult[this.currentIndex].col,\n          row: this.queryResult[this.currentIndex].row\n        },\n        '__search_component_highlight'\n      );\n    }\n    this.currentIndex--;\n    if (this.currentIndex < 0) {\n      this.currentIndex = this.queryResult.length - 1;\n    }\n    const { col, row } = this.queryResult[this.currentIndex];\n    this.table.arrangeCustomCellStyle({ col, row }, '__search_component_focuse');\n\n    this.jumpToCell(col, row);\n\n    return {\n      index: this.currentIndex,\n      results: this.queryResult\n    };\n  }\n\n  jumpToCell(col: number, row: number) {\n    // if focus cell out of screen, jump to cell\n    const { rowStart, rowEnd } = this.table.getBodyVisibleRowRange();\n    const { colStart, colEnd } = this.table.getBodyVisibleColRange();\n    if (row <= rowStart || row >= rowEnd || col <= colStart || col >= colEnd) {\n      this.table.scrollToCell({ col, row });\n    }\n  }\n\n  clear() {\n    // reset highlight cell style\n    this.updateCellStyle(null);\n    this.queryStr = '';\n    this.queryResult = [];\n    this.currentIndex = -1;\n  }\n}\n"]}

package/package.json

@@ -0,0 +1,86 @@
+{
+  "name": "@visactor/vtable-search",
+  "version": "0.20.4-alpha.3",
+  "description": "The search util of VTable",
+  "author": {
+    "name": "VisActor",
+    "url": "https://VisActor.io/"
+  },
+  "license": "MIT",
+  "sideEffects": false,
+  "main": "cjs/index.js",
+  "module": "es/index.js",
+  "types": "es/index.d.ts",
+  "files": [
+    "cjs",
+    "es",
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "require": "./cjs/index.js",
+      "import": "./es/index.js"
+    }
+  },
+  "unpkg": "latest",
+  "unpkgFiles": [
+    "dist/vtable-exporter.js"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@visactor/vtable": "0.20.4-alpha.3",
+    "@visactor/vutils": "~0.17.1"
+  },
+  "devDependencies": {
+    "@visactor/vchart": "1.9.1",
+    "@rushstack/eslint-patch": "~1.1.4",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@vitejs/plugin-react": "3.1.0",
+    "eslint": "~8.18.0",
+    "vite": "3.2.6",
+    "typescript": "4.9.5",
+    "@babel/core": "7.20.12",
+    "@babel/preset-env": "7.20.2",
+    "@types/chai": "4.2.22",
+    "@types/jest": "^26.0.0",
+    "@types/mocha": "9.0.0",
+    "@types/node": "*",
+    "@types/offscreencanvas": "2019.6.4",
+    "chai": "4.3.4",
+    "jest": "^26.0.0",
+    "jest-electron": "^0.1.12",
+    "jest-transform-stub": "^2.0.0",
+    "magic-string": "^0.25.7",
+    "mocha": "9.1.3",
+    "postcss": "8.4.21",
+    "rimraf": "3.0.2",
+    "sass": "1.43.5",
+    "ts-jest": "^26.0.0",
+    "ts-loader": "9.2.6",
+    "ts-node": "10.9.0",
+    "tslib": "2.3.1",
+    "ttypescript": "1.5.13",
+    "typescript-transform-paths": "3.3.1",
+    "json-formatter-js": "^2.3.4",
+    "inversify": "6.0.1",
+    "vite-plugin-markdown": "^2.1.0",
+    "markdown-it": "^13.0.0",
+    "node-fetch": "2.6.7",
+    "form-data": "~4.0.0",
+    "axios": "^1.4.0",
+    "@types/react-is": "^17.0.3",
+    "rollup-plugin-node-resolve": "5.2.0",
+    "@internal/bundler": "0.0.1",
+    "@internal/eslint-config": "0.0.1",
+    "@internal/ts-config": "0.0.1"
+  },
+  "scripts": {
+    "start": "vite ./demo",
+    "build": "bundle --clean"
+  }
+}