@sl-material/sl-table-sheet 1.1.0-beta0 → 1.1.0-beta1

package/package.json

@@ -1,29 +1,45 @@
 {
   "name": "@sl-material/sl-table-sheet",
-  "version": "1.1.0-beta0",
+  "version": "1.1.0-beta1",
   "description": "VTable 组件库 - 支持 npm 和 UMD",
-  "main": "./sl-table-sheet.cjs.js",
-  "module": "./sl-table-sheet.es.js",
-  "types": "./index.d.ts",
+  "main": "./dist/sl-table-sheet.cjs.js",
+  "module": "./dist/sl-table-sheet.es.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./sl-table-sheet.es.js",
-      "require": "./sl-table-sheet.cjs.js",
-      "types": "./index.d.ts"
-    }
+      "import": "./src/index.ts",
+      "require": "./dist/sl-table-sheet.cjs.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./style.css": "./dist/sl-table-sheet.css",
+    "./dist/style.css": "./dist/sl-table-sheet.css"
   },
-  "keywords": [
-    "spreadsheet",
-    "typescript",
-    "javascript"
+  "files": [
+    "dist"
   ],
-  "author": "",
-  "license": "MIT",
+  "scripts": {
+    "dev": "vite",
+    "build": "pnpm run build:lib && pnpm run build:umd",
+    "build:lib": "vite build --mode lib",
+    "build:umd": "vite build --mode umd",
+    "preview": "vite preview",
+    "type-check": "tsc --noEmit",
+    "publish": "npm run build && cd dist && npm publish"
+  },
+  "devDependencies": {
+    "typescript": "^5.3.0",
+    "vite": "^5.0.0",
+    "vite-plugin-css-injected-by-js": "^3.5.2",
+    "vite-plugin-dts": "^3.7.0"
+  },
+  "dependencies": {
+    "@sl-ui-pc/theme-chalk": "0.1.0-beta1",
+    "xlsx": "^0.18.5"
+  },
   "peerDependencies": {
     "@visactor/vtable": "^1.24.0",
     "@visactor/vtable-editors": "^1.24.0",
-    "@visactor/vtable-sheet": "^1.24.0",
-    "@visactor/vtable-gantt": "^1.24.0"
+    "@visactor/vtable-sheet": "^1.24.0"
   },
   "peerDependenciesMeta": {
     "@visactor/vtable": {
@@ -38,5 +54,12 @@
     "@visactor/vtable-gantt": {
       "optional": false
     }
-  }
-}
+  },
+  "keywords": [
+    "spreadsheet",
+    "typescript",
+    "javascript"
+  ],
+  "author": "",
+  "license": "MIT"
+}

package/core/Dialog-column.d.ts

@@ -1,117 +0,0 @@
-/**
- * 查找替换弹窗 - 纯 TypeScript/JavaScript 实现
- * 不依赖任何框架，可在任何项目中使用
- */
-export interface MatchPosition {
-    row: number;
-    col: number;
-    value: string;
-}
-export interface FindReplaceOptions {
-    container?: HTMLElement | string;
-    tableInstance?: any;
-    onSearch?: (matches: MatchPosition[]) => void;
-    onReplace?: (match: MatchPosition, newValue: string) => void;
-    selectedColumnsOnly?: boolean;
-}
-export declare class FindReplaceDialog {
-    private dialog;
-    private tableInstance;
-    private elements;
-    private state;
-    private options;
-    constructor(options?: FindReplaceOptions);
-    /**
-     * 初始化弹窗
-     */
-    private init;
-    /**
-     * 创建弹窗 DOM
-     */
-    private createDialog;
-    /**
-     * 绑定事件
-     */
-    private bindEvents;
-    /**
-     * 绑定拖拽事件
-     */
-    private bindDragEvents;
-    /**
-     * 注入样式
-     */
-    private injectStyles;
-    /**
-     * 解析容器
-     */
-    private resolveContainer;
-    /**
-     * 打开弹窗
-     */
-    open(): void;
-    /**
-     * 关闭弹窗
-     */
-    close(): void;
-    /**
-     * 重置状态
-     */
-    private resetState;
-    /**
-     * 清除结果显示
-     */
-    private clearResults;
-    /**
-     * 执行查找
-     */
-    private performSearch;
-    /**
-     * 高亮匹配项
-     */
-    private highlightMatch;
-    /**
-     * 查找下一个
-     */
-    findNext(): void;
-    /**
-     * 查找上一个
-     */
-    findPrevious(): void;
-    /**
-     * 替换一个
-     */
-    replaceOne(): void;
-    /**
-     * 全部替换
-     */
-    replaceAll(): void;
-    /**
-     * 显示消息
-     */
-    private showMessage;
-    /**
-     * 设置表格实例（用于表格重建后更新引用）
-     */
-    setTableInstance(tableInstance: any): void;
-    /**
-     * 设置是否只搜索选中列
-     */
-    setSelectedColumnsOnly(selectedOnly: boolean): void;
-    /**
-     * 获取是否只搜索选中列
-     */
-    getSelectedColumnsOnly(): boolean;
-    /**
-     * 设置查找文本
-     */
-    setFindText(text: string): void;
-    /**
-     * 设置替换文本
-     */
-    setReplaceText(text: string): void;
-    /**
-     * 销毁弹窗
-     */
-    destroy(): void;
-}
-export default FindReplaceDialog;

package/core/ExcelUtils.d.ts

@@ -1,6 +0,0 @@
-/**
- * ExcelUtils - Excel 导入导出工具类（兼容层）
- * 此文件保留用于向后兼容，新代码请使用 ./excel 模块
- * @deprecated 请使用 ./excel 模块中的功能
- */
-export * from './excel';

package/core/styles/dialog.d.ts

@@ -1,5 +0,0 @@
-/**
- * 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/toolbar.d.ts

@@ -1,5 +0,0 @@
-/**
- * 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    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 16px;\n    height: 32px;\n    border: 1px solid var(--sl-vtable-bg-color1);\n    border-radius: 4px;\n    font-size: 14px;\n    color: var(--sl-vtable-content-color);\n    cursor: pointer;\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: 4px;\n    transition: all 0.2s;\n    height: 32px;\n    box-sizing: border-box;\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: 4px 0px 0px 4px;\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: 10px;\n    padding: 0;\n    background: transparent;\n    border: none;\n    font-size: 14px;\n    color: var(--sl-vtable-content-color);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\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    transform: rotate(180deg);\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";