@sl-material/sl-table-sheet 1.0.0-beta6 → 1.0.0-beta7

package/core/SlTableSheet.d.ts

@@ -4,6 +4,13 @@ import { Toolbar, ToolbarConfig } from './Toolbar';
 import { SheetTabs } from './SheetTabs';
 import { ExcelParseOptions, ExcelParseResult, MultiSheetParseResult, SheetData } from './excel';
 
+/** Loading 配置 */
+export interface LoadingConfig {
+    /** 是否显示 loading，默认 true */
+    show?: boolean;
+    /** loading 文本，默认 "加载中..." */
+    text?: string;
+}
 export interface SlTableSheetConfig extends Omit<TableSheetConfig, "container"> {
     container: HTMLElement | string;
     showToolbar?: boolean;
@@ -11,6 +18,8 @@ export interface SlTableSheetConfig extends Omit<TableSheetConfig, "container">
     showTabs?: boolean;
     /** 是否启用自动监听容器尺寸变化，默认 false */
     autoResize?: boolean;
+    /** Loading 配置 */
+    loading?: LoadingConfig;
     toolbar?: Partial<ToolbarConfig>;
     onExport?: (format: "csv" | "excel") => void;
     onRefresh?: () => void;
@@ -99,8 +108,9 @@ export declare class SlTableSheet {
     private injectStyles;
     /**
      * 更新标题统计
+     * @deprecated 此方法已废弃，请使用 leftSlot 自定义标题内容
      */
-    updateTitleStats(count: number, total: number): void;
+    updateTitleStats(_count: number, _total: number): void;
     /**
      * 获取 TableSheet 实例
      */
@@ -144,20 +154,29 @@ export declare class SlTableSheet {
     downloadExcel(filename?: string): void;
     /**
      * 显示 loading 状态
+     * @param text loading 文本，不传则使用配置中的默认文本
      */
     showLoading(text?: string): void;
     /**
      * 隐藏 loading 状态
      */
     hideLoading(): void;
+    /**
+     * 设置 loading 状态
+     * @param visible 是否显示
+     * @param text loading 文本
+     */
+    setLoading(visible: boolean, text?: string): void;
     /**
      * 解析在线 Excel 文件并显示到表格
      * @param url Excel 文件的 URL 地址
-     * @param options 解析选项
+     * @param options 解析选项，支持 showLoading 和 loadingText 覆盖全局配置
      * @returns 解析后的列配置和数据
      */
     loadExcelFromUrl(url: string, options?: ExcelParseOptions & {
         autoDisplay?: boolean;
+        showLoading?: boolean;
+        loadingText?: string;
     }): Promise<ExcelParseResult>;
     /**
      * 解析 Excel ArrayBuffer 并显示到表格
@@ -219,8 +238,13 @@ export declare class SlTableSheet {
     destroy(): void;
     /**
      * 从 URL 加载 Excel 所有 Sheet
+     * @param url Excel 文件的 URL 地址
+     * @param options 解析选项，支持 showLoading 和 loadingText 覆盖全局配置
      */
-    loadAllSheetsFromUrl(url: string, options?: Omit<ExcelParseOptions, "sheetIndex">): Promise<MultiSheetParseResult>;
+    loadAllSheetsFromUrl(url: string, options?: Omit<ExcelParseOptions, "sheetIndex"> & {
+        showLoading?: boolean;
+        loadingText?: string;
+    }): Promise<MultiSheetParseResult>;
     /**
      * 解析 Excel ArrayBuffer 的所有 Sheet
      */

package/core/TableSheet.d.ts

@@ -92,7 +92,6 @@ export declare class TableSheet {
     private customComponentManager;
     private cellMarkManager;
     private eventManager;
-    private editorManager;
     private lastWidth;
     private lastHeight;
     private resizeTimeout;
@@ -174,10 +173,6 @@ export declare class TableSheet {
      * 防抖的 resize 方法（用于频繁触发的场景）
      */
     resizeDebounced(): void;
-    /**
-     * 强制重新渲染表格
-     */
-    private forceRerender;
     /**
      * 获取原始实例
      */

package/core/Toolbar.d.ts

@@ -1,11 +1,9 @@
 
 export interface ToolbarConfig {
     container?: HTMLElement | string;
-    title?: string;
-    count?: number;
-    total?: number;
-    hint?: string;
+    /** 冻结列数 */
     freezeCount?: number;
+    /** 是否显示错误列表 */
     showErrorList?: boolean;
     /** 左侧自定义内容，可以是 HTMLElement 或返回 HTMLElement 的函数 */
     leftSlot?: HTMLElement | (() => HTMLElement) | null;
@@ -26,10 +24,6 @@ export declare class Toolbar {
     private config;
     private elements;
     constructor(config: ToolbarConfig);
-    /**
-     * 初始化
-     */
-    private init;
     /**
      * 获取容器
      */
@@ -54,26 +48,10 @@ export declare class Toolbar {
      * 创建冻结列选择器（标题 + 数字输入框 + 上下箭头）
      */
     private createFreezeButton;
-    /**
-     * 格式化数字（添加千分位）
-     */
-    private formatNumber;
     /**
      * 注入样式
      */
     private injectStyles;
-    /**
-     * 更新标题
-     */
-    updateTitle(title: string): void;
-    /**
-     * 更新统计数据
-     */
-    updateStats(count: number, total: number): void;
-    /**
-     * 更新提示信息
-     */
-    updateHint(hint: string): void;
     /**
      * 更新冻结列数
      */

package/core/styles/dialog.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Dialog 样式
+ */
+export declare const DIALOG_STYLES = "\n  .find-replace-dialog {\n    position: fixed;\n    top: 80px;\n    left: 50%;\n    transform: translateX(-50%);\n    z-index: 9999;\n    font-size: 14px;\n    color: #1D2129;\n    pointer-events: auto;\n  }\n\n  .find-replace-container {\n    background: white;\n    border-radius: 8px;\n    width: 500px;\n    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);\n    animation: slideIn 0.2s ease-out;\n  }\n\n  @keyframes slideIn {\n    from { opacity: 0; transform: translateX(20px); }\n    to { opacity: 1; transform: translateX(0); }\n  }\n\n  .find-replace-title {\n    font-size: 16px;\n    font-weight: 500;\n    color: #303133;\n  }\n\n  .find-replace-body {\n    padding: 16px;\n  }\n\n  .find-replace-group {\n    margin-bottom: 16px;\n    display: flex;\n    align-items: center;\n  }\n\n  .find-replace-label {\n    display: block;\n    min-width: 56px;\n    margin-right: 8px;\n  }\n\n  .find-replace-checkbox {\n    display: none;\n    align-items: center;\n    font-weight: normal;\n    min-width: auto;\n    margin-right: 0;\n  }\n\n  .find-replace-checkbox input {\n    margin-right: 6px;\n  }\n\n  .find-replace-input-wrapper {\n    position: relative;\n    display: flex;\n    align-items: center;\n    flex: 1;\n    height: 32px;\n  }\n\n  .find-replace-input {\n    width: 100%;\n    padding: 0px 12px;\n    border: 1px solid #dcdfe6;\n    border-radius: 4px;\n    height: 32px;\n  }\n\n  .find-replace-input:focus {\n    outline: none;\n    border-color: #409eff;\n  }\n\n  .current-position {\n    margin-left: 10px;\n    color: #409eff;\n    font-weight: 500;\n  }\n\n  .find-replace-footer {\n    padding: 0px 16px 16px 16px;\n    display: flex;\n    justify-content: flex-end;\n    gap: 8px;\n    flex-wrap: wrap;\n  }\n\n  .find-replace-btn {\n    padding: 6px 16px;\n    border-radius: 4px;\n    height: 32px;\n    cursor: pointer;\n    background: var(--sl-color-white);\n    border: 1px solid var(--sl-border-color);\n  }\n\n  .find-replace-btn-primary {\n    background-color: var(--sl-color-primary);\n    color: white;\n  }\n\n  .find-replace-btn-primary:hover {\n    border-color: var(--sl-button-hover-border-color);\n    background-color: var(--sl-button-hover-bg-color);\n  }\n\n  .message-toast {\n    height: 40px;\n    position: fixed;\n    top: 20px;\n    left: 50%;\n    transform: translateX(-50%) translateY(-100px);\n    padding: 11px 15px;\n    color: white;\n    border-radius: 4px;\n    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);\n    z-index: 9999;\n    opacity: 0;\n    transition: all 0.3s ease-out;\n    display: flex;\n    align-items: center;\n  }\n\n  .message-toast--info {\n    background-color: var(--sl-color-info-light-9);\n    border: 1px solid var(--sl-color-info-light-8);\n    color: var(--sl-color-info);\n  }\n\n  .message-toast--success {\n    background-color: var(--sl-color-success-light-9);\n    border: 1px solid var(--sl-color-success-light-8);\n    color: var(--sl-color-success);\n  }\n\n  .message-toast--warning {\n    background-color: var(--sl-color-warning-light-9);\n    border: 1px solid var(--sl-color-warning-light-8);\n    color: var(--sl-color-warning);\n  }\n\n  .message-toast--error {\n    background-color: var(--sl-color-error-light-9);\n    border: 1px solid var(--sl-color-error-light-8);\n    color: var(--sl-color-error);\n  }\n\n  .message-toast.show {\n    transform: translateX(-50%) translateY(0);\n    opacity: 1;\n  }\n";
+export declare const DIALOG_STYLE_ID = "find-replace-styles";

package/core/styles/index.d.ts

@@ -0,0 +1,2 @@
+export { TOOLBAR_STYLES, TOOLBAR_STYLE_ID } from './toolbar';
+export { DIALOG_STYLES, DIALOG_STYLE_ID } from './dialog';

package/core/styles/toolbar.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Toolbar 样式
+ */
+export declare const TOOLBAR_STYLES = "\n  .sl-toolbar {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 8px 16px;\n    background: var(--sl-vtable-card-bg-color);\n    font-size: 14px;\n    color: var(--sl-vtable-content-color);\n    flex-shrink: 0;\n    height: 60px;\n    border-radius: 4px;\n  }\n  \n  .sl-toolbar-right {\n    display: flex;\n    align-items: center;\n    gap: 24px;\n  }\n\n  .sl-toolbar-btn {\n    padding: 6px 14px;\n    height: 32px;\n    background: var(--sl-vtable-bg-color1);\n    border: 1px solid var(--sl-vtable-bg-color1);\n    border-radius: 8px;\n    font-size: 14px;\n    color: var(--sl-vtable-content-color);\n    cursor: pointer;\n    transition: all 0.2s;\n    white-space: nowrap;\n  }\n\n  .sl-toolbar-btn:hover {\n    background: #E8E9EB;\n  }\n\n  .sl-toolbar-btn-icon {\n    padding: 6px 10px;\n    font-size: 16px;\n    min-width: 32px;\n  }\n\n  .sl-toolbar-btn-complex {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n  }\n\n  .sl-btn-icon {\n    font-size: 14px;\n  }\n\n  .sl-btn-text {\n    font-size: 14px;\n  }\n\n  .sl-btn-count {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--sl-vtable-primary-color);\n  }\n\n  .sl-btn-suffix {\n    font-size: 14px;\n  }\n\n  .sl-freeze-selector {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n  }\n\n  .sl-freeze-label {\n    font-size: 14px;\n    color: var(--sl-vtable-content-color);\n    white-space: nowrap;\n  }\n\n  .sl-freeze-input-wrapper {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    background: var(--sl-vtable-bg-color1);\n    border: 1px solid var(--sl-vtable-bg-color1);\n    border-radius: 8px;\n    transition: all 0.2s;\n    height: 32px;\n    box-sizing: border-box;\n  }\n\n  .sl-freeze-input-wrapper:hover {\n    background: #E8E9EB;\n    border-color: var(--sl-vtable-primary-color);\n  }\n\n  .sl-freeze-input-wrapper:focus-within {\n    border-color: var(--sl-vtable-primary-color);\n    box-shadow: 0 0 0 2px rgba(40, 120, 255, 0.1);\n  }\n\n  .sl-freeze-input {\n    width: 30px;\n    height: 30px;\n    padding: 0px 2px;\n    border-radius: 8px 0px 0px 8px;\n    background: #fff;\n    border: none;\n    font-size: 14px;\n    color: var(--sl-vtable-content-color);\n    text-align: center;\n    outline: none;\n    -moz-appearance: textfield;\n  }\n\n  .sl-freeze-input::-webkit-outer-spin-button,\n  .sl-freeze-input::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  .sl-freeze-arrows {\n    display: flex;\n    flex-direction: column;\n    border-left: 1px solid #E5E6EB;\n  }\n\n  .sl-freeze-arrow {\n    width: 20px;\n    height: 16px;\n    padding: 0;\n    background: transparent;\n    border: none;\n    font-size: 8px;\n    color: var(--sl-vtable-content-color);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: all 0.2s;\n    opacity: 0.6;\n  }\n\n  .sl-freeze-arrow:hover {\n    background: rgba(40, 120, 255, 0.1);\n    opacity: 1;\n    color: var(--sl-vtable-primary-color);\n  }\n\n  .sl-freeze-arrow:active {\n    background: rgba(40, 120, 255, 0.2);\n  }\n\n  .sl-freeze-arrow-up {\n    border-radius: 0 8px 0 0;\n  }\n\n  .sl-freeze-arrow-down {\n    border-radius: 0 0 8px 0;\n    border-top: 1px solid #E5E6EB;\n  }\n\n  .sl-freeze-suffix {\n    font-size: 14px;\n    color: var(--sl-vtable-content-color);\n  }\n\n  .sl-error-list-checkbox {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    cursor: pointer;\n    user-select: none;\n  }\n\n  .sl-checkbox-input {\n    position: absolute;\n    opacity: 0;\n    width: 0;\n    height: 0;\n  }\n\n  .sl-checkbox-custom {\n    position: relative;\n    width: 16px;\n    height: 16px;\n    border: 2px solid #C9CDD4;\n    border-radius: 4px;\n    background: #fff;\n    transition: all 0.2s;\n    flex-shrink: 0;\n  }\n\n  .sl-checkbox-input:checked + .sl-checkbox-custom {\n    background: var(--sl-vtable-primary-color);\n    border-color: var(--sl-vtable-primary-color);\n  }\n\n  .sl-checkbox-input:checked + .sl-checkbox-custom::after {\n    content: \"\";\n    position: absolute;\n    left: 4px;\n    top: 1px;\n    width: 4px;\n    height: 8px;\n    border: solid white;\n    border-width: 0 2px 2px 0;\n    transform: rotate(45deg);\n  }\n\n  .sl-error-list-checkbox:hover .sl-checkbox-custom {\n    border-color: var(--sl-vtable-primary-color);\n  }\n\n  .sl-checkbox-label {\n    font-size: 14px;\n    color: var(--sl-vtable-content-color);\n  }\n\n  /* \u54CD\u5E94\u5F0F\u8BBE\u8BA1 */\n  @media (max-width: 768px) {\n    .sl-toolbar {\n      flex-direction: column;\n      align-items: flex-start;\n      gap: 12px;\n    }\n\n    .sl-toolbar-left {\n      flex-direction: column;\n      align-items: flex-start;\n      gap: 8px;\n    }\n\n    .sl-toolbar-right {\n      width: 100%;\n      justify-content: flex-start;\n      flex-wrap: wrap;\n    }\n  }\n";
+export declare const TOOLBAR_STYLE_ID = "sl-toolbar-styles";

package/core/utils/DomUtils.d.ts

@@ -0,0 +1,23 @@
+/**
+ * DOM 工具类 - 提取公共的 DOM 操作方法
+ */
+export declare class DomUtils {
+    /**
+     * 获取容器元素
+     * @param container 容器元素或选择器
+     */
+    static getContainer(container: HTMLElement | string): HTMLElement | null;
+    /**
+     * 注入样式到页面
+     * @param id 样式标签的 ID
+     * @param css CSS 内容
+     */
+    static injectStyles(id: string, css: string): void;
+    /**
+     * 创建元素并设置属性
+     * @param tag 标签名
+     * @param className 类名
+     * @param innerHTML 内部 HTML
+     */
+    static createElement<K extends keyof HTMLElementTagNameMap>(tag: K, className?: string, innerHTML?: string): HTMLElementTagNameMap[K];
+}

package/core/utils/index.d.ts

@@ -0,0 +1 @@
+export { DomUtils } from './DomUtils';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sl-material/sl-table-sheet",
-  "version": "1.0.0-beta6",
+  "version": "1.0.0-beta7",
   "description": "VTable 组件库 - 支持 npm 和 UMD",
   "main": "./sl-table-sheet.cjs.js",
   "module": "./sl-table-sheet.es.js",