feat: add search result

packages/vtable-search/demo/index.html

@@ -16,7 +16,8 @@
     </div>
     <div class="content">
       <div id="search-component">
-        <input id="search-component-input" type="text" placeholder="search">
+        <input id="search-component-input" type="text" placeholder="search" aria-placeholder="aaa">
+        <span id="search-component-result">0/0</span>
         <button id="search-component-search">search</button>
         <button id="search-component-next">next</button>
         <button id="search-component-prev">prev</button>

packages/vtable-search/demo/main.ts

@@ -133,24 +133,28 @@ const run = () => {
 function bindSearch() {
   const searchInput = document.getElementById('search-component-input') as HTMLInputElement;
   const searchBtn = document.getElementById('search-component-search') as HTMLButtonElement;
+  const searchResult = document.getElementById('search-component-result') as HTMLSpanElement;
   const searchPrevBtn = document.getElementById('search-component-prev') as HTMLButtonElement;
   const searchNextBtn = document.getElementById('search-component-next') as HTMLButtonElement;
 
   searchBtn.addEventListener('click', () => {
     if (window.search) {
-      window.search.search(searchInput.value);
+      const result = window.search.search(searchInput.value);
+      searchResult.innerText = `${result.index + 1}/${result.results.length}`;
     }
   });
 
   searchPrevBtn.addEventListener('click', () => {
     if (window.search) {
-      window.search.prev();
+      const result = window.search.prev();
+      searchResult.innerText = `${result.index + 1}/${result.results.length}`;
     }
   });
 
   searchNextBtn.addEventListener('click', () => {
     if (window.search) {
-      window.search.next();
+      const result = window.search.next();
+      searchResult.innerText = `${result.index + 1}/${result.results.length}`;
     }
   });
 }

packages/vtable-search/src/search-component/search-component.ts

@@ -17,7 +17,7 @@ export type SearchComponentOption = {
   skipHeader?: boolean;
   highlightCellStyle?: VTable.TYPES.CellStyle;
   focuseHighlightCellStyle?: VTable.TYPES.CellStyle;
-  queryMethod?: (queryStr: string, value: string, option: { col: number; row: number; table: IVTable }) => boolean;
+  queryMethod?: (queryStr: string, value: string, option?: { col: number; row: number; table: IVTable }) => boolean;
   callback?: (queryResult: QueryResult, table: IVTable) => void;
 };
 
@@ -67,6 +67,13 @@ export class SearchComponent {
     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)) {
@@ -85,10 +92,6 @@ export class SearchComponent {
 
     this.updateCellStyle();
 
-    if (this.autoJump) {
-      this.next();
-    }
-
     if (this.callback) {
       this.callback(
         {
@@ -98,6 +101,14 @@ export class SearchComponent {
         this.table
       );
     }
+
+    if (this.autoJump) {
+      return this.next();
+    }
+    return {
+      index: 0,
+      results: this.queryResult
+    };
   }
 
   updateCellStyle(highlight: boolean = true) {
@@ -118,7 +129,10 @@ export class SearchComponent {
 
   next() {
     if (!this.queryResult.length) {
-      return;
+      return {
+        index: 0,
+        results: this.queryResult
+      };
     }
     if (this.currentIndex !== -1) {
       // reset last focus
@@ -138,11 +152,19 @@ export class SearchComponent {
     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;
+      return {
+        index: 0,
+        results: this.queryResult
+      };
     }
     if (this.currentIndex !== -1) {
       // reset last focus
@@ -162,6 +184,11 @@ export class SearchComponent {
     this.table.arrangeCustomCellStyle({ col, row }, '__search_component_focuse');
 
     this.jumpToCell(col, row);
+
+    return {
+      index: this.currentIndex,
+      results: this.queryResult
+    };
   }
 
   jumpToCell(col: number, row: number) {

packages/vtable/src/ts-types/base-table.ts

@@ -55,7 +55,8 @@ import type {
   IRowDimension,
   TableEventOptions,
   IPivotChartDataConfig,
-  IListTableDataConfig
+  IListTableDataConfig,
+  ColumnStyleOption
 } from '.';
 import type { TooltipOptions } from './tooltip';
 import type { IWrapTextGraphicAttribute } from '../scenegraph/graphic/text';
@@ -709,6 +710,9 @@ export interface BaseTableAPI {
    * @param cellAddr 要滚动到的单元格位置
    */
   scrollToCell: (cellAddr: { col?: number; row?: number }) => void;
+
+  registerCustomCellStyle: (customStyleId: string, customStyle: ColumnStyleOption | undefined | null) => void;
+  arrangeCustomCellStyle: (cellPos: { col?: number; row?: number; range?: CellRange }, customStyleId: string) => void;
 }
 export interface ListTableProtected extends IBaseTableProtected {
   /** 表格数据 */