xiaodao-spreader 0.1.3 → 0.1.5

package/README.md

@@ -1,31 +1,142 @@
-# xiaodao-spreader
+# Xiaodao Spreader
 
-A Vue 3 spreadsheet component based on Canvas 2D, providing an Excel-like editing experience.
+中文 | [English](./README.md)
+
+A high-performance, canvas-based spreadsheet component for Vue 3 — bringing an Excel-like editing experience to the web.
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
+[![Vue 3](https://img.shields.io/badge/Vue-3.4+-42b883.svg)](https://vuejs.org/)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.4+-3178C6.svg)](https://www.typescriptlang.org/)
+[![Vite](https://img.shields.io/badge/Vite-5.0+-646CFF.svg)](https://vitejs.dev/)
 
 ![Preview](./img/preview.png)
 
+---
+
+## Table of Contents
+
+- [Features](#features)
+- [Installation](#installation)
+- [Quick Start](#quick-start)
+- [Basic Usage](#basic-usage)
+- [Props](#props)
+- [Data Model](#data-model)
+- [Architecture](#architecture)
+- [Keyboard Shortcuts](#keyboard-shortcuts)
+- [Formula Engine](#formula-engine)
+- [Theming](#theming)
+- [Development](#development)
+- [Building](#building)
+- [Roadmap](#roadmap)
+- [Contributing](#contributing)
+- [License](#license)
+- [中文版](./README.ZH.md)
+
+---
+
+## Features
+
+### Core Spreadsheet
+- **Canvas 2D Rendering** — High-DPI aware with DPR scaling, virtual viewport rendering for 200 × 26 sheets
+- **Multi-Sheet Workbook** — Tab bar with add, rename, duplicate, delete, reorder
+- **Formula Engine** — `=SUM()` range calculation with dependency tracking and circular-reference detection
+- **Merge Cells** — Merge & Center, Merge Across, Unmerge with border synchronization
+- **Rich Cell Formatting** — Font family, font size (5–72), bold, italic, underline, strikethrough, text color, fill color, horizontal & vertical alignment, wrap text
+- **Borders** — Top / bottom / left / right / all / none with 5 predefined styles and custom color
+- **Undo / Redo** — Full state snapshots for cells, column widths, and row heights (50 steps)
+- **Format Painter** — Copy & apply cell formatting across ranges
+
+### Interaction
+- **Smart Selection** — Click, drag, Shift+Click, row/column header select, corner-cell select-all
+- **Double-Click Editing** — Inline cell editor with `<textarea>` for multi-line input
+- **Formula Bar** — Dedicated input bar with cell label and live formula display
+- **Full Keyboard Navigation** — Arrow keys, Tab, Enter, Home, End, Ctrl+Home, Ctrl+End
+- **Context Menus** — Context-aware menus for cells, rows, columns, sheet tabs, with nested submenus
+- **Row / Column Operations** — Insert, delete, cut, copy, paste via right-click menu
+- **Column Width / Row Height** — Drag-to-resize with live preview and double-click auto-fit
+- **Touch Support** — Swipe scrolling, double-tap to edit
+- **Responsive** — ResizeObserver for dynamic container sizing
+
+### Visual
+- **Light / Dark Theme** — Full color palette with 50+ CSS custom properties
+- **Internationalization** — English & Chinese (zh-CN) out of the box
+- **Overflow Toolbar** — Responsive toolbar that automatically collapses overflow buttons into a dropdown menu
+- **Custom Scrollbars** — Native-styled scrollbars with arrow buttons and draggable thumbs
+
+---
+
+## Installation
+
+```bash
+# pnpm (recommended)
+pnpm add xiaodao-spreader
+
+# npm
+npm install xiaodao-spreader
+
+# yarn
+yarn add xiaodao-spreader
+```
+
+### Peer Dependencies
+
+- `vue` ^3.4.0
+
+---
+
 ## Quick Start
 
 ```bash
+# Clone the repository
+git clone https://github.com/xiaodaozhi/xiaodao-spreader.git
+cd xiaodao-spreader
+
+# Install dependencies
 pnpm install
+
+# Start dev server
 pnpm dev
 ```
 
+Navigate to `http://localhost:5173` to see the demo application.
+
+---
+
 ## Basic Usage
 
 ```vue
 <template>
-  <Spreadsheet v-model:data="myData" />
+  <Spreader
+    v-model:data="myData"
+    :row-count="100"
+    :col-count="12"
+    theme="light"
+    locale="zh-CN"
+  />
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import Spreadsheet from './components/spreader/spreader.vue'
+import { ref } from 'vue';
+import Spreader from 'xiaodao-spreader';
+import type { SheetModelData } from 'xiaodao-spreader';
 
-const myData = ref([])
+const myData = ref<SheetModelData[]>([
+  {
+    name: 'Sheet1',
+    cells: {
+      '0,0': { value: 'Name' },
+      '0,1': { value: 'Age' },
+      '1,0': { value: 'Alice', style: { fontSize: 14, fontWeight: 'bold' } },
+      '1,1': { value: '28' },
+    },
+    colWidths: { 0: 120, 1: 80 },
+  },
+]);
 </script>
 ```
 
+---
+
 ## Props
 
 | Prop | Type | Default | Description |
@@ -33,59 +144,313 @@ const myData = ref([])
 | `data` (v-model) | `SheetModelData[]` | `[]` | Multi-sheet data (two-way binding) |
 | `rowCount` | `number` | `200` | Total rows per sheet |
 | `colCount` | `number` | `26` | Total columns per sheet |
-| `width` | `number \| string` | — | Component width (pixel value, percentages not supported) |
-| `height` | `number \| string` | — | Component height (pixel value, percentages not supported) |
+| `width` | `number \| string` | — | Component width (pixels; omit or pass `string` for responsive) |
+| `height` | `number \| string` | — | Component height (pixels; omit or pass `string` for responsive) |
 | `theme` | `'light' \| 'dark'` | `'light'` | Theme mode |
-| `locale` | `string` | `'zh-CN'` | Language (`'zh-CN'` / `'en-US'`) |
+| `locale` | `string` | `'zh-CN'` | Language — `'zh-CN'` \| `'en-US'` |
+
+---
+
+## Data Model
+
+### `SheetModelData`
 
-### SheetModelData Type
+The external data format used for v-model two-way binding:
 
 ```typescript
 interface SheetModelData {
-  name: string
-  cells: Record<string, { value: string; style?: Record<string, unknown> }>
-  colWidths?: Record<number, number>   // Column index → width (px), only stores non-default values
-  rowHeights?: Record<number, number>  // Row index → height (px), only stores non-default values
+  name: string;
+  cells: Record<string, {
+    value: string;
+    style?: Record<string, unknown>;
+  }>;
+  merges?: Record<string, SelectionRange>;
+  colWidths?: Record<number, number>;
+  rowHeights?: Record<number, number>;
 }
 ```
 
-The key of `cells` is a `"col,row"` string format (e.g., `"0,0"` represents A1).
+- **`cells`**: Key is `"col,row"` (e.g., `"0,0"` for cell A1).
+- **`style`**: Arbitrary CSS-like style properties (`fontSize`, `fontWeight`, `color`, `background`, etc.).
+- **`merges`**: Merge cell definitions, keyed by merge anchor cell.
+- **`colWidths` / `rowHeights`**: Sparse maps — only stores non-default values.
 
-## Features
+### Type Exports
 
-- **Canvas Rendering**: High DPI support, virtual rendering only draws cells in the visible area
-- **Multiple Sheets**: Tab bar switching, create, rename, duplicate, delete, drag-to-reorder
-- **Formula Engine**: Supports `=SUM(A1:B5)` range summation with dependency tracking and caching
-- **Undo/Redo**: Ctrl+Z / Ctrl+Y, up to 50 steps
-- **Selection**: Click / drag / Shift+Click selection, row/column headers and corner cell for one-click select-all
-- **Editing**: Double-click / F2 / direct input to enter edit mode, formula bar supports formula input
-- **Keyboard Navigation**: Arrow keys / Tab / Enter / Home / End / Ctrl+Home / Ctrl+End
-- **Clipboard**: Ctrl+C/V/X copy, paste, cut (TSV format), formula references automatically offset
-- **Row/Column Operations**: Right-click menu to insert, delete, cut, copy, paste entire rows/columns
-- **Column Width/Row Height Dragging**: Drag header edges to resize
-- **Context Menu**: Independent context menus for cells, row/column headers, corner cell, and tab bar; nested submenu support (e.g., Calculate → Sum)
-- **Theme**: Light / Dark dual theme
-- **Internationalization**: Chinese / English right-click menus
-- **Touch**: Swipe scrolling + double-tap to enter edit mode
-- **Custom Scrollbar**: Physical scrollbar with arrow buttons and draggable thumb
-- **Responsive**: ResizeObserver monitors container size changes
+```typescript
+import type {
+  CellCoord,       // { col: number; row: number }
+  SelectionRange,  // { startCol; startRow; endCol; endRow }
+  CellData,        // { value: string; style: Record<string, unknown> | null }
+  Range,           // { start: number; end: number }
+  SpreadsheetOptions,
+  SpreadsheetData,
+  SheetModelData,  // ← main data interface
+  SheetState,      // internal runtime state
+  UndoSnapshot,
+  ContextMenuItem,
+  ThemeColors,
+  Point,
+} from 'xiaodao-spreader';
+```
 
-## Tech Stack
+---
+
+## Architecture
+
+```
+src/
+├── components/
+│   └── spreader.ts                 # Barrel export (unified entry point)
+│       └── spreader/
+│           ├── components/
+│           │   ├── spreadsheet.vue # Main component — template + style + composition
+│           │   ├── toolbar.vue     # Toolbar with overflow dropdown
+│           │   ├── tabbar.vue      # Sheet tab bar
+│           │   ├── dropdown.vue    # Generic dropdown component
+│           │   └── pickers/
+│           │       ├── colorPicker.vue
+│           │       ├── borderPicker.vue
+│           │       └── mergePicker.vue
+│           ├── composables/
+│           │   ├── core-state.ts    # Props, cells/merges/selection, font metrics, navigation
+│           │   ├── undo-styles.ts   # Undo/redo, format painter, font/alignment/color
+│           │   ├── borders-merge.ts # Border sync, merge ops, clipboard, sum
+│           │   ├── sheets-ops.ts   # Row/col ops, multi-sheet, v-model emit, theme, refs
+│           │   └── interactions.ts  # Renderer, formula bar, tab bar, context menu, scrollbar, events
+│           └── core/
+│               ├── constants.ts     # Layout constants, i18n, theme palettes
+│               ├── types.ts         # All type definitions
+│               ├── formula.ts      # Formula engine (parse, evaluate, deps, cache)
+│               ├── theme.ts         # Theme CSS variable construction
+│               └── utils.ts        # Pure utilities (col label, hit test, resolve size)
+```
+
+### Design Principles
+
+- **Composition API**: All business logic extracted into `composables/`, maintaining single-responsibility modules
+- **Canvas 2D Rendering**: Only visible cells are drawn (virtual rendering), ensuring smooth performance on large sheets
+- **No Dirty Flags**: Manual `scheduleRender()` calls at interaction end-points; `requestAnimationFrame` automatically merges multiple calls within the same frame
+- **Shared State**: A central `CoreState` object is injected into each composable, enabling cross-module communication without tight coupling
+- **Reactive Wrap**: Composable return values are wrapped in `reactive()` for automatic ref/computed unwrapping in templates
+
+---
+
+## Keyboard Shortcuts
+
+### Navigation
+
+| Keys | Action |
+|------|--------|
+| `↑` `↓` `←` `→` | Move active cell |
+| `Tab` / `Shift+Tab` | Move right / left |
+| `Enter` / `Shift+Enter` | Move down / up |
+| `Home` / `End` | Jump to first / last column |
+| `Ctrl+Home` / `Ctrl+End` | Jump to A1 / bottom-right |
+| `PageUp` / `PageDown` | Scroll one page up / down |
+
+### Editing
+
+| Keys | Action |
+|------|--------|
+| `F2` / `双击` / `直接输入` | Enter edit mode |
+| `Enter` (in edit) | Commit and move down |
+| `Tab` (in edit) | Commit and move right |
+| `Escape` (in edit) | Cancel edit |
+| `Ctrl+Enter` | Line break in multi-line cells |
+| `Delete` / `Backspace` | Clear selection |
+
+### Clipboard & History
+
+| Keys | Action |
+|------|--------|
+| `Ctrl+C` / `Ctrl+X` / `Ctrl+V` | Copy / Cut / Paste |
+| `Ctrl+Z` / `Ctrl+Y` | Undo / Redo |
+| `Ctrl+A` | Select all |
+
+### Formatting
+
+| Keys | Action |
+|------|--------|
+| `Ctrl+B` | Bold |
+| `Ctrl+I` | Italic |
+| `Ctrl+U` | Underline |
+
+---
+
+## Formula Engine
+
+### Supported Formulas
+
+| Formula | Syntax | Description |
+|---------|--------|-------------|
+| `SUM` | `=SUM(A1:B5)` | Range summation |
+| Absolute ref | `$A$1` | Lock column and row |
+| Mixed ref | `$A1`, `A$1` | Lock column or row only |
+
+### Dependency Tracking
+
+The `FormulaDeps` class maintains a bidirectional dependency graph:
+
+- **Forward**: `formulaKey` → `[depKey, ...]` — which cells a formula references
+- **Reverse**: `depKey` → `Set<formulaKey>` — which formulas depend on a cell
+
+When a cell changes, dirty flags propagate through the reverse graph. Circular references (depth > 20) return `#ERROR`.
+
+### Reference Offsetting During Paste
 
-- **Framework**: Vue 3 (Composition API + `<script setup>`)
-- **Build**: Vite 5
-- **Language**: TypeScript (strict)
-- **Rendering**: Canvas 2D
-- **Package Manager**: pnpm
+`shiftFormulaRefs()` automatically adjusts cell references in formulas when pasting, with `$` absolute reference locking.
 
-## Build
+---
+
+## Theming
+
+### Built-in Themes
+
+```typescript
+import type { ThemeColors } from 'xiaodao-spreader';
+
+const lightTheme: ThemeColors = { /* 50+ color fields */ };
+const darkTheme: ThemeColors = { /* 50+ color fields */ };
+```
+
+### CSS Variable Injection
+
+Theme colors are injected via CSS custom properties (`--sp-*`):
+
+```css
+--sp-bg, --sp-gridBg, --sp-gridLine, --sp-selectionBg,
+--sp-headerBg, --sp-headerBorder, --sp-headerText,
+--sp-formulaBarBg, --sp-formulaBarInputBorder,
+--sp-wrapperBg, --sp-cellEditorBorder,
+/* ... and many more */
+```
+
+### Custom Theme
+
+Pass `theme="dark"` for dark mode, or create a wrapper component that overrides CSS variables for full customization:
+
+```vue
+<template>
+  <div style="--sp-bg: #1a1a2e; --sp-cellText: #e0e0e0;">
+    <Spreader v-model:data="myData" theme="dark" />
+  </div>
+</template>
+```
+
+### Internationalization
+
+Built-in languages: `'zh-CN'`, `'en-US'`. Pass via `locale` prop. Right-click menus and toolbar labels are automatically localized.
+
+---
+
+## Development
 
 ```bash
-pnpm build      # Type check + production build
-pnpm preview    # Preview build output
-pnpm type-check # Type check only
+# Install dependencies
+pnpm install
+
+# Start dev server (with auto-reload)
+pnpm dev
+
+# Type check only
+pnpm type-check
 ```
 
-## Design Document
+The dev server runs on `http://localhost:5173` by default.
+
+---
+
+## Building
+
+```bash
+# Production build (type-check + vite build)
+pnpm build
+
+# Preview production build
+pnpm preview
+
+# Build for demo/testing purposes
+pnpm build:demo
+```
+
+### Build Output
+
+| File | Description |
+|------|-------------|
+| `dist/xiaodao-spreader.es.js` | ES module (for bundlers) |
+| `dist/xiaodao-spreader.umd.js` | UMD bundle (for direct `<script>` usage) |
+| `dist/xiaodao-spreader.css` | Extracted stylesheet |
+| `dist/types/` | TypeScript declaration files |
+
+### CI/CD
+
+The project includes a GitHub Actions workflow (`.github/workflows/publish.yml`) for automated publishing to npm.
+
+---
+
+## Roadmap
+
+### Near-term
+
+- [ ] More formulas: `AVERAGE`, `COUNT`, `IF`, `VLOOKUP`, `CONCATENATE`
+- [ ] Cell background color picker
+- [ ] Number format (currency, percentage, date, number of decimals)
+- [ ] Conditional formatting rules
+- [ ] Auto-fill drag handle
+- [ ] Find & Replace
+
+### Mid-term
+
+- [ ] Frozen panes (freeze rows/columns)
+- [ ] Data validation (dropdown lists, input constraints)
+- [ ] Column / row grouping and collapsing
+- [ ] Sort & filter
+- [ ] Cell comments / notes
+- [ ] Print layout
+
+### Long-term
+
+- [ ] OffscreenCanvas + Web Worker for multi-threaded rendering
+- [ ] Shared worker for cross-tab collaboration
+- [ ] Plugin system for custom cell renderers
+- [ ] Excel / CSV import & export
+- [ ] Chart engine (embedded mini-charts)
+
+---
+
+## Tech Stack
+
+| Layer | Technology | Version |
+|-------|-----------|---------|
+| Framework | Vue 3 (Composition API + `<script setup>`) | ^3.4 |
+| Build | Vite | ^5.0 |
+| Language | TypeScript (strict) | ~5.4 |
+| Rendering | Canvas 2D API | — |
+| Type Checker | vue-tsc | ^2.2 |
+| Package Manager | pnpm | — |
+| CSS | Scoped CSS + CSS Custom Properties | — |
+
+---
+
+## Contributing
+
+Contributions are welcome! Please feel free to:
+
+1. Fork the repository
+2. Create a feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'feat: add amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+Before submitting, please ensure the type check passes (`pnpm type-check`) and the build succeeds (`pnpm build`).
+
+---
+
+## License
+
+This project is licensed under the MIT License — see the [LICENSE](LICENSE) file for details.
+
+---
 
-See [DOC.md](./DOC.md) for details on architecture, file structure, data model, rendering pipeline, interaction model, and extension points.
+**Crafted with care by [xiaodaozhi](https://github.com/xiaodaozhi)**

package/dist/style.css

@@ -1 +1 @@
-.sp-dropdown[data-v-47e5c681]{position:relative;display:inline-flex;min-width:0}.sp-dropdown__trigger[data-v-47e5c681]{display:flex;align-items:center;justify-content:space-between;gap:4px;width:100%;height:26px;border:1px solid transparent;border-radius:3px;background:transparent;color:var(--sp-toolbar-btn-color, #444);font-size:12px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Microsoft YaHei,sans-serif;cursor:pointer;padding:0 5px;box-sizing:border-box}.sp-dropdown__trigger[data-v-47e5c681]:hover{background:var(--sp-toolbar-btn-hover-bg, #e6e6e6)}.sp-dropdown__trigger--open[data-v-47e5c681]{background:var(--sp-toolbar-btn-hover-bg, #e6e6e6);border-color:var(--sp-toolbar-border, #d8d8d8)}.sp-dropdown__value[data-v-47e5c681]{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.sp-dropdown__caret[data-v-47e5c681]{width:12px;height:12px;min-width:12px;opacity:.7}.sp-dropdown__menu[data-v-47e5c681]{position:fixed;z-index:20000;display:flex;flex-direction:column;background:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 2px 8px #00000026;padding:4px 0;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Microsoft YaHei,sans-serif;transform-origin:top center}.sp-dropdown__menu--up[data-v-47e5c681]{transform-origin:bottom center}.menu-pop-enter-active[data-v-47e5c681],.menu-pop-leave-active[data-v-47e5c681]{transition:opacity .12s ease-out,transform .12s ease-out}.menu-pop-enter-from[data-v-47e5c681],.menu-pop-leave-to[data-v-47e5c681]{opacity:0;transform:scaleY(.85)}.sp-dropdown__nav[data-v-47e5c681]{display:flex;align-items:center;justify-content:center;height:15px;min-height:15px;border:none;background:transparent;color:#666;cursor:pointer;padding:0}.sp-dropdown__nav[data-v-47e5c681]:hover:not(:disabled){background:#eef3f9}.sp-dropdown__nav[data-v-47e5c681]:disabled{color:#ccc;cursor:default}.sp-dropdown__nav svg[data-v-47e5c681]{width:10px;height:10px}.sp-dropdown__list[data-v-47e5c681]{display:flex;flex-direction:column;overflow:hidden;touch-action:none}.sp-dropdown__item[data-v-47e5c681]{display:block;width:100%;height:26px;min-height:26px;border:none;background:transparent;color:#333;font-size:13px;text-align:left;cursor:pointer;padding:0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box}.sp-dropdown__item[data-v-47e5c681]:hover{background:#eef3f9}.sp-dropdown__item--active[data-v-47e5c681]{background:#e5f1fb;color:#0078d7}.color-picker[data-v-c262a5e5]{position:relative;display:inline-flex;height:26px}.color-picker__menu[data-v-c262a5e5]{position:absolute;top:calc(100% + 4px);right:0;z-index:9999;background:#fff;border:1px solid var(--sp-toolbar-border, #d0d0d0);border-radius:4px;padding:6px;box-shadow:0 4px 12px #0000001f;-webkit-user-select:none;user-select:none;transform-origin:top right}.menu-pop-enter-active[data-v-c262a5e5],.menu-pop-leave-active[data-v-c262a5e5]{transition:opacity .12s ease-out,transform .12s ease-out}.menu-pop-enter-from[data-v-c262a5e5],.menu-pop-leave-to[data-v-c262a5e5]{opacity:0;transform:scale(.9)}.color-picker__row[data-v-c262a5e5]{display:flex;gap:4px;margin-bottom:4px}.color-picker__row[data-v-c262a5e5]:last-child{margin-bottom:0}.color-picker__swatch[data-v-c262a5e5]{width:20px;height:20px;padding:0;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .08s,box-shadow .08s;position:relative}.color-picker__swatch[data-v-c262a5e5]:hover{transform:scale(1.18);box-shadow:0 0 0 1px #0003;z-index:1}.color-picker__swatch--selected[data-v-c262a5e5]{box-shadow:0 0 0 2px #0078d7}.border-picker[data-v-c9b0ba80]{position:relative;display:inline-flex;height:26px}.border-picker__menu[data-v-c9b0ba80]{position:absolute;top:calc(100% + 4px);right:0;z-index:9999;background:#fff;border:1px solid var(--sp-toolbar-border, #d0d0d0);border-radius:4px;box-shadow:0 4px 12px #0000001f;-webkit-user-select:none;user-select:none;padding:4px;transform-origin:top right}.border-picker__item[data-v-c9b0ba80]{display:flex;align-items:center;gap:6px;width:100%;padding:4px 8px;border:none;background:transparent;color:var(--sp-toolbar-btn-color, #444);cursor:pointer;border-radius:3px;font-size:12px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Microsoft YaHei,sans-serif;white-space:nowrap}.border-picker__item[data-v-c9b0ba80]:hover{background:#eef3f9}.border-picker__icon[data-v-c9b0ba80]{width:18px;height:18px;flex-shrink:0}.border-picker__label[data-v-c9b0ba80]{overflow:hidden;text-overflow:ellipsis}.menu-pop-enter-active[data-v-c9b0ba80],.menu-pop-leave-active[data-v-c9b0ba80]{transition:opacity .12s ease-out,transform .12s ease-out}.menu-pop-enter-from[data-v-c9b0ba80],.menu-pop-leave-to[data-v-c9b0ba80]{opacity:0;transform:scale(.9)}.toolbar[data-v-69401a37]{position:relative;display:flex;align-items:center;height:32px;min-height:32px;gap:2px;padding:0 6px;background:var(--sp-toolbar-bg);border-bottom:1px solid var(--sp-toolbar-border);-webkit-user-select:none;user-select:none}.tb-item[data-v-69401a37]{display:flex;align-items:center;flex:0 0 auto}.toolbar-sep[data-v-69401a37]{width:1px;height:18px;margin:0 4px;background:var(--sp-toolbar-border)}.toolbar-font[data-v-69401a37]{flex:0 0 auto}.toolbar-font-size[data-v-69401a37]{display:inline-flex;align-items:center;gap:0;height:26px;position:relative}.toolbar-font-size__input[data-v-69401a37]{width:36px;height:26px;border:1px solid transparent;border-right:none;border-radius:3px 0 0 3px;background:transparent;color:var(--sp-toolbar-btn-color);font-size:12px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Microsoft YaHei,sans-serif;text-align:center;padding:0 2px;outline:none;box-sizing:border-box}.toolbar-font-size__input[data-v-69401a37]:hover{background:var(--sp-toolbar-btn-hover-bg)}.toolbar-font-size__input[data-v-69401a37]:focus{border-color:var(--sp-toolbar-border);background:#fff}.toolbar-font-size__btn[data-v-69401a37]{display:flex;align-items:center;justify-content:center;width:16px;height:26px;border:1px solid transparent;border-left:none;border-radius:0 3px 3px 0;background:transparent;color:var(--sp-toolbar-btn-color);cursor:pointer;padding:0}.toolbar-font-size__btn[data-v-69401a37]:hover{background:var(--sp-toolbar-btn-hover-bg)}.toolbar-font-size__btn svg[data-v-69401a37]{width:10px;height:10px}.toolbar-font-size__dropdown[data-v-69401a37]{position:absolute;width:56px;height:26px;pointer-events:none}.toolbar-btn[data-v-69401a37]{display:flex;align-items:center;justify-content:center;width:30px;height:26px;border:none;border-radius:3px;background:transparent;color:var(--sp-toolbar-btn-color);cursor:pointer;padding:0}.toolbar-btn[data-v-69401a37]:hover:not(:disabled){background:var(--sp-toolbar-btn-hover-bg)}.toolbar-btn[data-v-69401a37]:active:not(:disabled){opacity:.7}.toolbar-btn--active[data-v-69401a37]{background:var(--sp-toolbar-btn-hover-bg);color:var(--sp-toolbar-btn-active-color)}.toolbar-btn--step[data-v-69401a37]{width:26px;height:26px}.toolbar-btn--step svg[data-v-69401a37]{width:16px;height:16px}.toolbar-btn[data-v-69401a37]:disabled{color:var(--sp-toolbar-btn-disabled-color);cursor:default}.toolbar-btn__icon[data-v-69401a37]{width:18px;height:18px}.toolbar-btn svg[data-v-69401a37]:not(.toolbar-btn__icon){width:18px;height:18px}.toolbar-split[data-v-69401a37]{display:inline-flex;align-items:center;position:relative;height:26px}.toolbar-split__main[data-v-69401a37]{border:1px solid transparent;border-right:none;border-radius:3px 0 0 3px}.toolbar-split__arrow[data-v-69401a37]{display:flex;align-items:center;justify-content:center;width:16px;height:26px;border:1px solid transparent;border-radius:0 3px 3px 0;background:transparent;color:var(--sp-toolbar-btn-color);cursor:pointer;padding:0}.toolbar-split__arrow[data-v-69401a37]:hover:not(:disabled){background:var(--sp-toolbar-btn-hover-bg)}.toolbar-split__arrow svg[data-v-69401a37]{width:10px!important;height:10px!important}.toolbar-more[data-v-69401a37]{display:flex;align-items:center;justify-content:center;width:30px;height:26px;border:none;border-radius:3px;background:transparent;color:var(--sp-toolbar-btn-color);cursor:pointer;padding:0;flex:0 0 auto;margin-left:auto}.toolbar-more[data-v-69401a37]:hover{background:var(--sp-toolbar-btn-hover-bg)}.toolbar-more--active[data-v-69401a37]{background:var(--sp-toolbar-btn-hover-bg);color:var(--sp-toolbar-btn-active-color)}.toolbar-more svg[data-v-69401a37]{width:18px;height:18px}.overflow-menu[data-v-69401a37]{min-width:180px;max-width:260px;max-height:calc(100vh - 40px);overflow-y:auto;background:var(--sp-toolbar-bg, #fff);border:1px solid var(--sp-toolbar-border);border-radius:4px;box-shadow:0 4px 12px #0000001f;padding:4px 6px;display:flex;flex-direction:column;gap:2px;z-index:1000;transform-origin:top right}.overflow-menu.no-anim[data-v-69401a37]{transition:none!important}.overflow-menu .tb-item[data-v-69401a37]{width:100%}.overflow-menu .toolbar-sep[data-v-69401a37]{width:100%;height:1px;margin:2px 0}.overflow-menu .toolbar-split[data-v-69401a37]{width:100%}.overflow-menu .toolbar-split__main[data-v-69401a37]{flex:1 1 auto;justify-content:flex-start}.overflow-menu .toolbar-font-size[data-v-69401a37]{width:100%;justify-content:flex-start}.overflow-menu .toolbar-font[data-v-69401a37]{width:100%}.menu-pop-enter-active[data-v-69401a37],.menu-pop-leave-active[data-v-69401a37]{transition:opacity .12s ease-out,transform .12s ease-out}.menu-pop-enter-from[data-v-69401a37],.menu-pop-leave-to[data-v-69401a37]{opacity:0;transform:scale(.9)}.tab-bar[data-v-49f54625]{display:flex;align-items:stretch;height:30px;min-height:30px;background:var(--sp-tab-bar-bg);border-top:1px solid var(--sp-tab-bar-border);-webkit-user-select:none;user-select:none;margin-top:4px}.tab-list[data-v-49f54625]{display:flex;align-items:flex-start;flex:1;overflow:hidden;gap:1px;padding:0 1px}.tab-item[data-v-49f54625]{display:flex;align-items:center;height:28px;min-width:0;max-width:120px;padding:0 10px;cursor:pointer;border:1px solid var(--sp-tab-inactive-border);background:var(--sp-tab-inactive-bg);color:var(--sp-tab-inactive-color);font-size:14px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Microsoft YaHei,sans-serif;white-space:nowrap;transition:background .1s}.tab-item[data-v-49f54625]:hover{background:var(--sp-tab-hover-bg)}.tab-item--active[data-v-49f54625]{height:28px;background:var(--sp-tab-active-bg);color:var(--sp-tab-active-color);border-color:var(--sp-tab-active-bg) var(--sp-tab-bar-border) var(--sp-tab-bar-border);border-top:2px solid var(--sp-tab-active-border);font-size:16px}.tab-item--active[data-v-49f54625]:hover{background:var(--sp-tab-active-bg)}.tab-item__name[data-v-49f54625]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tab-rename-input[data-v-49f54625]{width:100%;height:18px;border:none;border-radius:0;outline:none;padding:0;font-size:16px;font-family:inherit;background:var(--sp-tab-active-bg);color:var(--sp-tab-active-color);box-sizing:border-box}.tab-bar__add-btn[data-v-49f54625]{width:24px;min-width:24px;height:24px;margin:0 4px 3px 3px;border:none;background:transparent;color:var(--sp-tab-add-btn-color);font-size:16px;line-height:22px;text-align:center;cursor:pointer;padding:0}.tab-bar__add-btn[data-v-49f54625]:hover{background:var(--sp-tab-add-btn-hover-bg)}.spreadsheet-outer[data-v-59bd8e5f]{flex:1;display:flex;flex-direction:column;overflow:hidden}.formula-bar[data-v-59bd8e5f]{display:flex;align-items:start;height:36px;min-height:36px;padding:0;gap:0}.formula-bar__cell-label[data-v-59bd8e5f]{width:48px;min-width:48px;height:28px;line-height:28px;margin-top:4px;text-align:center;font-size:12px;font-weight:600;color:var(--sp-formula-bar-label-color);background:var(--sp-formula-bar-label-bg);border:1px solid var(--sp-formula-bar-label-border);border-radius:2px;-webkit-user-select:none;user-select:none}.formula-bar__input[data-v-59bd8e5f]{flex:1;height:28px;margin-top:4px;border:1px solid var(--sp-formula-bar-input-border);border-radius:2px;outline:none;padding:0 6px;margin-left:4px;font-size:13px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Microsoft YaHei,sans-serif;color:var(--sp-formula-bar-input-color);background:var(--sp-formula-bar-input-bg)}.formula-bar__input[data-v-59bd8e5f]:focus{border-color:var(--sp-formula-bar-input-focus-border);box-shadow:0 0 0 1px var(--sp-formula-bar-input-focus-shadow)}.spreadsheet-wrapper[data-v-59bd8e5f]{flex:1;position:relative;overflow:hidden;background:var(--sp-wrapper-bg)}.grid-canvas[data-v-59bd8e5f]{position:absolute;top:0;left:0;display:block;outline:none;cursor:cell}.grid-canvas[data-v-59bd8e5f]:focus{outline:none}.v-scrollbar[data-v-59bd8e5f]{position:absolute;right:0;top:0;width:11px;height:calc(100% - 11px);display:flex;flex-direction:column;background:var(--sp-wrapper-bg)}.h-scrollbar[data-v-59bd8e5f]{position:absolute;left:0;bottom:0;height:11px;width:calc(100% - 11px);display:flex;background:var(--sp-wrapper-bg)}.sb-corner[data-v-59bd8e5f]{position:absolute;right:0;bottom:0;width:11px;height:11px;background:var(--sp-wrapper-bg)}.sb-btn[data-v-59bd8e5f]{width:11px;height:11px;min-width:11px;min-height:11px;border:none;background:var(--sp-scroll-btn-bg, #e8e8e8);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;-webkit-user-select:none;user-select:none}.sb-btn[data-v-59bd8e5f]:hover{background:var(--sp-scroll-btn-hover-bg, #d0d0d0)}.sb-btn[data-v-59bd8e5f]:active{background:var(--sp-scroll-btn-active-bg, #c0c0c0)}.sb-arrow[data-v-59bd8e5f]{display:block;width:0;height:0}.sb-arrow--up[data-v-59bd8e5f]{border-left:3px solid transparent;border-right:3px solid transparent;border-bottom:4px solid var(--sp-scroll-btn-color, #666)}.sb-arrow--down[data-v-59bd8e5f]{border-left:3px solid transparent;border-right:3px solid transparent;border-top:4px solid var(--sp-scroll-btn-color, #666)}.sb-arrow--left[data-v-59bd8e5f]{border-top:3px solid transparent;border-bottom:3px solid transparent;border-right:4px solid var(--sp-scroll-btn-color, #666)}.sb-arrow--right[data-v-59bd8e5f]{border-top:3px solid transparent;border-bottom:3px solid transparent;border-left:4px solid var(--sp-scroll-btn-color, #666)}.sb-track[data-v-59bd8e5f]{flex:1;position:relative;background:var(--sp-scroll-track-bg, rgba(0,0,0,.06))}.sb-track--v[data-v-59bd8e5f]{width:11px}.sb-track--h[data-v-59bd8e5f]{height:11px}.sb-thumb[data-v-59bd8e5f]{position:absolute;border-radius:3px;background:var(--sp-scroll-thumb);cursor:default}.sb-thumb[data-v-59bd8e5f]:hover{background:var(--sp-scroll-thumb-hover)}.sb-thumb--v[data-v-59bd8e5f]{left:1px;right:1px;min-height:16px}.sb-thumb--h[data-v-59bd8e5f]{top:1px;bottom:1px;min-width:16px}.cell-editor[data-v-59bd8e5f]{position:absolute;border:2px solid var(--sp-cell-editor-border);outline:none;padding:0 4px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Microsoft YaHei,sans-serif;font-size:13px;color:var(--sp-cell-editor-color);background:var(--sp-cell-editor-bg);box-shadow:0 0 0 1px var(--sp-cell-editor-shadow);z-index:10;box-sizing:border-box;min-width:0}.context-menu{position:fixed;z-index:10000;background:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 2px 8px #00000026;padding:4px 0;min-width:120px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Microsoft YaHei,sans-serif;font-size:13px;transform-origin:top left}.context-menu__item{padding:6px 20px;cursor:pointer;color:#333;white-space:nowrap;position:relative;display:flex;align-items:center;justify-content:space-between}.context-menu__item:hover{background:#e8f0fe}.context-menu__item--disabled{color:#bbb;cursor:default}.context-menu__item--disabled:hover{background:transparent}.context-menu__arrow{margin-left:16px;margin-right:-5px;width:0;height:0;border-top:3px solid transparent;border-bottom:3px solid transparent;border-left:4px solid #888}.context-submenu{display:none;position:absolute;left:100%;top:-4px;background:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 2px 8px #00000026;padding:4px 0;min-width:100px;z-index:10001}.context-submenu--left{left:auto;right:100%}.context-menu__item:hover>.context-submenu{display:block}.context-submenu .context-menu__item{justify-content:flex-start}.menu-pop-enter-active,.menu-pop-leave-active{transition:opacity .12s ease-out,transform .12s ease-out}.menu-pop-enter-from,.menu-pop-leave-to{opacity:0;transform:scale(.9)}.dim-panel{position:fixed;z-index:10002;width:220px;background:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 2px 8px #00000026;padding:10px 12px;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Microsoft YaHei,sans-serif;-webkit-user-select:none;user-select:none;transform-origin:top left}.dim-panel__title{font-size:13px;font-weight:600;color:#333;margin-bottom:8px}.dim-panel__body{display:flex;align-items:center;gap:6px}.dim-panel__input{flex:1;height:26px;border:1px solid #c0c0c0;border-radius:3px;outline:none;padding:0 6px;font-size:13px;color:#1a1a1a;background:#fff;box-sizing:border-box}.dim-panel__input:focus{border-color:#0078d7;box-shadow:0 0 0 1px #0078d74d}.dim-panel__input--error{border-color:#d93025;box-shadow:0 0 0 1px #d930254d}.dim-panel__unit{font-size:12px;color:#888}.dim-panel__error{margin-top:6px;font-size:12px;color:#d93025;line-height:1.4}.dim-panel__footer{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}.dim-panel__btn{height:26px;padding:0 14px;border:1px solid #ccc;border-radius:3px;background:#fff;color:#333;font-size:13px;cursor:pointer}.dim-panel__btn:hover{background:#f0f0f0}.dim-panel__btn--primary{border-color:#0078d7;background:#0078d7;color:#fff}.dim-panel__btn--primary:hover{background:#0069c0}
+.sp-dropdown[data-v-8dc09f5d]{position:relative;display:inline-flex;min-width:0}.sp-dropdown__trigger[data-v-8dc09f5d]{display:flex;align-items:center;justify-content:space-between;gap:4px;width:100%;height:26px;border:1px solid transparent;border-radius:3px;background:transparent;color:var(--sp-toolbar-btn-color, #444);font-size:12px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Microsoft YaHei,sans-serif;cursor:pointer;padding:0 5px;box-sizing:border-box}.sp-dropdown__trigger[data-v-8dc09f5d]:hover{background:var(--sp-toolbar-btn-hover-bg, #e6e6e6)}.sp-dropdown__trigger--open[data-v-8dc09f5d]{background:var(--sp-toolbar-btn-hover-bg, #e6e6e6);border-color:var(--sp-toolbar-border, #d8d8d8)}.sp-dropdown__value[data-v-8dc09f5d]{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.sp-dropdown__caret[data-v-8dc09f5d]{width:10px;height:10px;min-width:10px;opacity:.7}.sp-dropdown__menu[data-v-8dc09f5d]{position:fixed;z-index:20000;display:flex;flex-direction:column;background:#fff;border:1px solid var(--sp-toolbar-border, #d0d0d0);border-radius:4px;box-shadow:0 4px 12px #0000001f;padding:4px;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Microsoft YaHei,sans-serif;transform-origin:top center}.sp-dropdown__menu--up[data-v-8dc09f5d]{transform-origin:bottom center}.menu-pop-enter-active[data-v-8dc09f5d],.menu-pop-leave-active[data-v-8dc09f5d]{transition:opacity .12s ease-out,transform .12s ease-out}.menu-pop-enter-from[data-v-8dc09f5d],.menu-pop-leave-to[data-v-8dc09f5d]{opacity:0;transform:scaleY(.85)}.sp-dropdown__nav[data-v-8dc09f5d]{display:flex;align-items:center;justify-content:center;height:15px;min-height:15px;border:none;background:transparent;color:var(--sp-toolbar-btn-color, #666);cursor:pointer;padding:0;border-radius:3px}.sp-dropdown__nav[data-v-8dc09f5d]:hover:not(:disabled){background:#eef3f9}.sp-dropdown__nav[data-v-8dc09f5d]:disabled{color:#ccc;cursor:default}.sp-dropdown__nav svg[data-v-8dc09f5d]{width:10px;height:10px}.sp-dropdown__list[data-v-8dc09f5d]{display:flex;flex-direction:column;overflow:hidden;touch-action:none}.sp-dropdown__icon[data-v-8dc09f5d]{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}.sp-dropdown__icon[data-v-8dc09f5d] svg{width:18px;height:18px;display:block}.sp-dropdown__item-icon[data-v-8dc09f5d]{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}.sp-dropdown__item-icon[data-v-8dc09f5d] svg{width:16px;height:16px;display:block}.sp-dropdown__item-label[data-v-8dc09f5d]{white-space:nowrap}.sp-dropdown__item[data-v-8dc09f5d]{display:flex;align-items:center;gap:6px;width:100%;border:none;background:transparent;color:var(--sp-toolbar-btn-color, #444);font-size:12px;cursor:pointer;padding:4px 8px;box-sizing:border-box;border-radius:3px}.sp-dropdown__item[data-v-8dc09f5d]:hover{background:#eef3f9}.sp-dropdown__item--active[data-v-8dc09f5d]{background:#e5f1fb;color:#0078d7}.color-picker[data-v-f00d0dae]{position:relative;display:inline-flex;height:26px}.color-picker__menu[data-v-f00d0dae]{position:fixed;z-index:9999;background:#fff;border:1px solid var(--sp-toolbar-border, #d0d0d0);border-radius:4px;padding:6px;box-shadow:0 4px 12px #0000001f;-webkit-user-select:none;user-select:none;transform-origin:top right}.menu-pop-enter-active[data-v-f00d0dae],.menu-pop-leave-active[data-v-f00d0dae]{transition:opacity .12s ease-out,transform .12s ease-out}.menu-pop-enter-from[data-v-f00d0dae],.menu-pop-leave-to[data-v-f00d0dae]{opacity:0;transform:scale(.9)}.color-picker__row[data-v-f00d0dae]{display:flex;gap:4px;margin-bottom:4px}.color-picker__row[data-v-f00d0dae]:last-child{margin-bottom:0}.color-picker__swatch[data-v-f00d0dae]{width:20px;height:20px;padding:0;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .08s,box-shadow .08s;position:relative}.color-picker__swatch[data-v-f00d0dae]:hover{transform:scale(1.18);box-shadow:0 0 0 1px #0003;z-index:1}.color-picker__swatch--selected[data-v-f00d0dae]{box-shadow:0 0 0 2px #0078d7}.border-picker[data-v-3721e5e4]{position:relative;display:inline-flex;height:26px}.border-picker__menu[data-v-3721e5e4]{position:fixed;z-index:9999;background:#fff;border:1px solid var(--sp-toolbar-border, #d0d0d0);border-radius:4px;box-shadow:0 4px 12px #0000001f;-webkit-user-select:none;user-select:none;padding:4px;transform-origin:top right}.border-picker__item[data-v-3721e5e4]{display:flex;align-items:center;gap:6px;width:100%;padding:4px 8px;border:none;background:transparent;color:var(--sp-toolbar-btn-color, #444);cursor:pointer;border-radius:3px;font-size:12px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Microsoft YaHei,sans-serif;white-space:nowrap}.border-picker__item[data-v-3721e5e4]:hover{background:#eef3f9}.border-picker__icon[data-v-3721e5e4]{width:18px;height:18px;flex-shrink:0}.border-picker__label[data-v-3721e5e4]{overflow:hidden;text-overflow:ellipsis}.menu-pop-enter-active[data-v-3721e5e4],.menu-pop-leave-active[data-v-3721e5e4]{transition:opacity .12s ease-out,transform .12s ease-out}.menu-pop-enter-from[data-v-3721e5e4],.menu-pop-leave-to[data-v-3721e5e4]{opacity:0;transform:scale(.9)}.merge-picker[data-v-24e4dbe5]{position:relative;display:inline-flex;height:26px}.merge-picker__menu[data-v-24e4dbe5]{position:fixed;z-index:9999;background:#fff;border:1px solid var(--sp-toolbar-border, #d0d0d0);border-radius:4px;box-shadow:0 4px 12px #0000001f;-webkit-user-select:none;user-select:none;padding:4px;transform-origin:top right}.merge-picker__item[data-v-24e4dbe5]{display:flex;align-items:center;gap:6px;width:100%;padding:4px 8px;border:none;background:transparent;color:var(--sp-toolbar-btn-color, #444);cursor:pointer;border-radius:3px;font-size:12px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Microsoft YaHei,sans-serif;white-space:nowrap}.merge-picker__item[data-v-24e4dbe5]:hover{background:#eef3f9}.merge-picker__icon[data-v-24e4dbe5]{width:18px;height:18px;flex-shrink:0;display:flex;align-items:center;justify-content:center}.merge-picker__icon[data-v-24e4dbe5] svg{width:18px;height:18px}.merge-picker__label[data-v-24e4dbe5]{overflow:hidden;text-overflow:ellipsis}.menu-pop-enter-active[data-v-24e4dbe5],.menu-pop-leave-active[data-v-24e4dbe5]{transition:opacity .12s ease-out,transform .12s ease-out}.menu-pop-enter-from[data-v-24e4dbe5],.menu-pop-leave-to[data-v-24e4dbe5]{opacity:0;transform:scale(.9)}.toolbar[data-v-c472a142]{position:relative;display:flex;align-items:center;height:32px;min-height:32px;gap:2px;padding:0 6px;background:var(--sp-toolbar-bg);border-bottom:1px solid var(--sp-toolbar-border);-webkit-user-select:none;user-select:none}.tb-item[data-v-c472a142]{display:flex;align-items:center;flex:0 0 auto}.toolbar-sep[data-v-c472a142]{width:1px;height:18px;margin:0 4px;background:var(--sp-toolbar-border)}.toolbar-font[data-v-c472a142],.toolbar-align[data-v-c472a142]{flex:0 0 auto}.toolbar-font-size[data-v-c472a142]{display:inline-flex;align-items:center;gap:0;height:26px;position:relative}.toolbar-font-size__input[data-v-c472a142]{width:36px;height:26px;border:1px solid transparent;border-right:none;border-radius:3px 0 0 3px;background:transparent;color:var(--sp-toolbar-btn-color);font-size:12px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Microsoft YaHei,sans-serif;text-align:left;padding:0 5px;outline:none;box-sizing:border-box;-webkit-appearance:none;appearance:none;-moz-appearance:textfield}.toolbar-font-size__input[data-v-c472a142]::-webkit-outer-spin-button,.toolbar-font-size__input[data-v-c472a142]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.toolbar-font-size__input[data-v-c472a142]:hover{background:var(--sp-toolbar-btn-hover-bg)}.toolbar-font-size__input[data-v-c472a142]:focus{border-color:var(--sp-toolbar-border);background:#fff}.toolbar-font-size__btn[data-v-c472a142]{display:flex;align-items:center;justify-content:center;width:16px;height:26px;border:1px solid transparent;border-left:none;border-radius:0 3px 3px 0;background:transparent;color:var(--sp-toolbar-btn-color);cursor:pointer;padding:0}.toolbar-font-size__btn[data-v-c472a142]:hover{background:var(--sp-toolbar-btn-hover-bg)}.toolbar-font-size__btn svg[data-v-c472a142]{width:10px;height:10px}.toolbar-font-size__dropdown[data-v-c472a142]{position:absolute;width:56px;height:26px;pointer-events:none}.toolbar-btn[data-v-c472a142]{display:flex;align-items:center;justify-content:center;width:30px;height:26px;border:none;border-radius:3px;background:transparent;color:var(--sp-toolbar-btn-color);cursor:pointer;padding:0}.toolbar-btn[data-v-c472a142]:hover:not(:disabled){background:var(--sp-toolbar-btn-hover-bg)}.toolbar-btn[data-v-c472a142]:active:not(:disabled){opacity:.7}.toolbar-btn--active[data-v-c472a142]{background:var(--sp-toolbar-btn-hover-bg);color:var(--sp-toolbar-btn-active-color)}.toolbar-btn--step[data-v-c472a142]{width:26px;height:26px}.toolbar-btn--step svg[data-v-c472a142]{width:16px;height:16px}.toolbar-btn[data-v-c472a142]:disabled{color:var(--sp-toolbar-btn-disabled-color);cursor:default}.toolbar-btn__icon[data-v-c472a142]{width:18px;height:18px}.toolbar-btn svg[data-v-c472a142]:not(.toolbar-btn__icon){width:18px;height:18px}.toolbar-split[data-v-c472a142]{display:inline-flex;align-items:center;position:relative;height:26px}.toolbar-split__main[data-v-c472a142]{border:1px solid transparent;border-right:none;border-radius:3px 0 0 3px}.toolbar-split__arrow[data-v-c472a142]{display:flex;align-items:center;justify-content:center;width:16px;height:26px;border:1px solid transparent;border-radius:0 3px 3px 0;background:transparent;color:var(--sp-toolbar-btn-color);cursor:pointer;padding:0}.toolbar-split__arrow[data-v-c472a142]:hover:not(:disabled){background:var(--sp-toolbar-btn-hover-bg)}.toolbar-split__arrow svg[data-v-c472a142]{width:10px!important;height:10px!important}.toolbar-more[data-v-c472a142]{display:flex;align-items:center;justify-content:center;width:30px;height:26px;border:none;border-radius:3px;background:transparent;color:var(--sp-toolbar-btn-color);cursor:pointer;padding:0;flex:0 0 auto;margin-left:auto}.toolbar-more[data-v-c472a142]:hover{background:var(--sp-toolbar-btn-hover-bg)}.toolbar-more--active[data-v-c472a142]{background:var(--sp-toolbar-btn-hover-bg);color:var(--sp-toolbar-btn-active-color)}.toolbar-more svg[data-v-c472a142]{width:18px;height:18px}.overflow-menu[data-v-c472a142]{min-width:180px;max-width:260px;max-height:calc(100vh - 40px);overflow-y:auto;background:var(--sp-toolbar-bg, #fff);border:1px solid var(--sp-toolbar-border);border-radius:4px;box-shadow:0 4px 12px #0000001f;padding:4px 6px;display:flex;flex-direction:column;gap:2px;z-index:1000;transform-origin:top right}.overflow-menu.no-anim[data-v-c472a142]{transition:none!important}.overflow-menu .tb-item[data-v-c472a142]{width:100%}.overflow-menu .toolbar-sep[data-v-c472a142]{width:100%;height:1px;margin:2px 0}.overflow-menu .toolbar-split[data-v-c472a142]{width:100%}.overflow-menu .toolbar-split__main[data-v-c472a142]{flex:1 1 auto;justify-content:flex-start;padding-left:6px}.overflow-menu .toolbar-font-size[data-v-c472a142]{width:100%;justify-content:flex-start}.overflow-menu .toolbar-font[data-v-c472a142],.overflow-menu .toolbar-align[data-v-c472a142]{width:100%}.overflow-menu .toolbar-btn[data-v-c472a142]:not(.toolbar-btn--step):not(.toolbar-split__arrow){width:100%;justify-content:flex-start;padding-left:6px}.overflow-menu .toolbar-color[data-v-c472a142]{width:100%}.overflow-menu .toolbar-wrap[data-v-c472a142]{width:100%;justify-content:flex-start}.menu-pop-enter-active[data-v-c472a142],.menu-pop-leave-active[data-v-c472a142]{transition:opacity .12s ease-out,transform .12s ease-out}.menu-pop-enter-from[data-v-c472a142],.menu-pop-leave-to[data-v-c472a142]{opacity:0;transform:scale(.9)}.overflow-menu .tb-item{width:100%}.overflow-menu .toolbar-sep{width:100%;height:1px;margin:2px 0}.overflow-menu .toolbar-split{width:100%}.overflow-menu .toolbar-split__main{flex:1 1 auto;justify-content:flex-start;padding-left:6px}.overflow-menu .toolbar-font-size{width:100%;justify-content:flex-start}.overflow-menu .toolbar-font,.overflow-menu .toolbar-align{width:100%}.overflow-menu .toolbar-btn:not(.toolbar-btn--step):not(.toolbar-split__arrow){width:100%;justify-content:flex-start;padding-left:6px}.overflow-menu .toolbar-color{width:100%}.overflow-menu .toolbar-wrap{width:100%;justify-content:flex-start}.overflow-menu .toolbar-font-size__input{flex:1 1 auto;width:auto;min-width:40px}.overflow-menu .toolbar-btn:hover:not(:disabled){background:var(--sp-toolbar-btn-hover-bg)}.overflow-menu .toolbar-btn:active:not(:disabled){opacity:.7}.overflow-menu .toolbar-btn--active{background:var(--sp-toolbar-btn-hover-bg);color:var(--sp-toolbar-btn-active-color)}.overflow-menu .toolbar-btn:disabled{color:var(--sp-toolbar-btn-disabled-color);cursor:default}.overflow-menu .toolbar-split__main:hover:not(:disabled){background:var(--sp-toolbar-btn-hover-bg)}.overflow-menu .toolbar-split__arrow:hover:not(:disabled){background:var(--sp-toolbar-btn-hover-bg)}.overflow-menu .toolbar-font-size__input:hover{background:var(--sp-toolbar-btn-hover-bg)}.overflow-menu .toolbar-font-size__input:focus{border-color:var(--sp-toolbar-border);background:#fff}.overflow-menu .toolbar-font-size__btn:hover,.overflow-menu .toolbar-more:hover{background:var(--sp-toolbar-btn-hover-bg)}.overflow-menu .toolbar-more--active{background:var(--sp-toolbar-btn-hover-bg);color:var(--sp-toolbar-btn-active-color)}.tab-bar[data-v-454e1a12]{display:flex;align-items:stretch;height:30px;min-height:30px;background:var(--sp-tab-bar-bg);border-top:1px solid var(--sp-tab-bar-border);-webkit-user-select:none;user-select:none;margin-top:4px}.tab-list[data-v-454e1a12]{display:flex;align-items:flex-start;flex:1;overflow:hidden;gap:1px;padding:0 1px}.tab-item[data-v-454e1a12]{display:flex;align-items:center;height:28px;min-width:0;max-width:120px;padding:0 10px;cursor:pointer;border:1px solid var(--sp-tab-inactive-border);background:var(--sp-tab-inactive-bg);color:var(--sp-tab-inactive-color);font-size:14px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Microsoft YaHei,sans-serif;white-space:nowrap;transition:background .1s}.tab-item[data-v-454e1a12]:hover{background:var(--sp-tab-hover-bg)}.tab-item--active[data-v-454e1a12]{height:28px;background:var(--sp-tab-active-bg);color:var(--sp-tab-active-color);border-color:var(--sp-tab-active-bg) var(--sp-tab-bar-border) var(--sp-tab-bar-border);border-top:2px solid var(--sp-tab-active-border);font-size:16px}.tab-item--active[data-v-454e1a12]:hover{background:var(--sp-tab-active-bg)}.tab-item__name[data-v-454e1a12]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tab-rename-input[data-v-454e1a12]{width:100%;height:18px;border:none;border-radius:0;outline:none;padding:0;font-size:16px;font-family:inherit;background:var(--sp-tab-active-bg);color:var(--sp-tab-active-color);box-sizing:border-box}.tab-bar__add-btn[data-v-454e1a12]{width:24px;min-width:24px;height:24px;margin:0 4px 3px 3px;border:none;background:transparent;color:var(--sp-tab-add-btn-color);font-size:16px;line-height:22px;text-align:center;cursor:pointer;padding:0}.tab-bar__add-btn[data-v-454e1a12]:hover{background:var(--sp-tab-add-btn-hover-bg)}.spreadsheet-outer[data-v-a5861b41]{flex:1;display:flex;flex-direction:column;overflow:hidden}.formula-bar[data-v-a5861b41]{display:flex;align-items:start;height:36px;min-height:36px;padding:0;gap:0}.formula-bar__cell-label[data-v-a5861b41]{width:48px;min-width:48px;height:28px;line-height:28px;margin-top:4px;text-align:center;font-size:12px;font-weight:600;color:var(--sp-formula-bar-label-color);background:var(--sp-formula-bar-label-bg);border:1px solid var(--sp-formula-bar-label-border);border-radius:2px;-webkit-user-select:none;user-select:none}.formula-bar__input[data-v-a5861b41]{flex:1;height:28px;margin-top:4px;border:1px solid var(--sp-formula-bar-input-border);border-radius:2px;outline:none;padding:0 6px;margin-left:4px;font-size:13px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Microsoft YaHei,sans-serif;color:var(--sp-formula-bar-input-color);background:var(--sp-formula-bar-input-bg)}.formula-bar__input[data-v-a5861b41]:focus{border-color:var(--sp-formula-bar-input-focus-border);box-shadow:0 0 0 1px var(--sp-formula-bar-input-focus-shadow)}.spreadsheet-wrapper[data-v-a5861b41]{flex:1;position:relative;overflow:hidden;background:var(--sp-wrapper-bg)}.grid-canvas[data-v-a5861b41]{position:absolute;top:0;left:0;display:block;outline:none;cursor:cell}.grid-canvas[data-v-a5861b41]:focus{outline:none}.v-scrollbar[data-v-a5861b41]{position:absolute;right:0;top:0;width:11px;height:calc(100% - 11px);display:flex;flex-direction:column;background:var(--sp-wrapper-bg)}.h-scrollbar[data-v-a5861b41]{position:absolute;left:0;bottom:0;height:11px;width:calc(100% - 11px);display:flex;background:var(--sp-wrapper-bg)}.sb-corner[data-v-a5861b41]{position:absolute;right:0;bottom:0;width:11px;height:11px;background:var(--sp-wrapper-bg)}.sb-btn[data-v-a5861b41]{width:11px;height:11px;min-width:11px;min-height:11px;border:none;background:var(--sp-scroll-btn-bg, #e8e8e8);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;-webkit-user-select:none;user-select:none}.sb-btn[data-v-a5861b41]:hover{background:var(--sp-scroll-btn-hover-bg, #d0d0d0)}.sb-btn[data-v-a5861b41]:active{background:var(--sp-scroll-btn-active-bg, #c0c0c0)}.sb-arrow[data-v-a5861b41]{display:block;width:0;height:0}.sb-arrow--up[data-v-a5861b41]{border-left:3px solid transparent;border-right:3px solid transparent;border-bottom:4px solid var(--sp-scroll-btn-color, #666)}.sb-arrow--down[data-v-a5861b41]{border-left:3px solid transparent;border-right:3px solid transparent;border-top:4px solid var(--sp-scroll-btn-color, #666)}.sb-arrow--left[data-v-a5861b41]{border-top:3px solid transparent;border-bottom:3px solid transparent;border-right:4px solid var(--sp-scroll-btn-color, #666)}.sb-arrow--right[data-v-a5861b41]{border-top:3px solid transparent;border-bottom:3px solid transparent;border-left:4px solid var(--sp-scroll-btn-color, #666)}.sb-track[data-v-a5861b41]{flex:1;position:relative;background:var(--sp-scroll-track-bg, rgba(0,0,0,.06))}.sb-track--v[data-v-a5861b41]{width:11px}.sb-track--h[data-v-a5861b41]{height:11px}.sb-thumb[data-v-a5861b41]{position:absolute;border-radius:3px;background:var(--sp-scroll-thumb);cursor:default}.sb-thumb[data-v-a5861b41]:hover{background:var(--sp-scroll-thumb-hover)}.sb-thumb--v[data-v-a5861b41]{left:1px;right:1px;min-height:16px}.sb-thumb--h[data-v-a5861b41]{top:1px;bottom:1px;min-width:16px}.cell-editor[data-v-a5861b41]{position:absolute;border:2px solid var(--sp-cell-editor-border);outline:none;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Microsoft YaHei,sans-serif;font-size:13px;color:var(--sp-cell-editor-color);background:var(--sp-cell-editor-bg);box-shadow:0 0 0 1px var(--sp-cell-editor-shadow);z-index:10;box-sizing:border-box;min-width:0;overflow:hidden;padding:0;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;resize:none;white-space:pre-wrap;word-break:break-all}.context-menu{position:fixed;z-index:10000;background:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 2px 8px #00000026;padding:4px 0;min-width:120px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Microsoft YaHei,sans-serif;font-size:13px;transform-origin:top left}.context-menu__item{padding:6px 20px;cursor:pointer;color:#333;white-space:nowrap;position:relative;display:flex;align-items:center;justify-content:space-between}.context-menu__item:hover{background:#e8f0fe}.context-menu__item--disabled{color:#bbb;cursor:default}.context-menu__item--disabled:hover{background:transparent}.context-menu__arrow{margin-left:16px;margin-right:-5px;width:0;height:0;border-top:3px solid transparent;border-bottom:3px solid transparent;border-left:4px solid #888}.context-submenu{display:none;position:absolute;left:100%;top:-4px;background:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 2px 8px #00000026;padding:4px 0;min-width:100px;z-index:10001}.context-submenu--left{left:auto;right:100%}.context-menu__item:hover>.context-submenu{display:block}.context-submenu .context-menu__item{justify-content:flex-start}.menu-pop-enter-active,.menu-pop-leave-active{transition:opacity .12s ease-out,transform .12s ease-out}.menu-pop-enter-from,.menu-pop-leave-to{opacity:0;transform:scale(.9)}.dim-panel{position:fixed;z-index:10002;width:220px;background:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 2px 8px #00000026;padding:10px 12px;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Microsoft YaHei,sans-serif;-webkit-user-select:none;user-select:none;transform-origin:top left}.dim-panel__title{font-size:13px;font-weight:600;color:#333;margin-bottom:8px}.dim-panel__body{display:flex;align-items:center;gap:6px}.dim-panel__input{flex:1;height:26px;border:1px solid #c0c0c0;border-radius:3px;outline:none;padding:0 6px;font-size:13px;color:#1a1a1a;background:#fff;box-sizing:border-box}.dim-panel__input:focus{border-color:#0078d7;box-shadow:0 0 0 1px #0078d74d}.dim-panel__input--error{border-color:#d93025;box-shadow:0 0 0 1px #d930254d}.dim-panel__unit{font-size:12px;color:#888}.dim-panel__error{margin-top:6px;font-size:12px;color:#d93025;line-height:1.4}.dim-panel__footer{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}.dim-panel__btn{height:26px;padding:0 14px;border:1px solid #ccc;border-radius:3px;background:#fff;color:#333;font-size:13px;cursor:pointer}.dim-panel__btn:hover{background:#f0f0f0}.dim-panel__btn--primary{border-color:#0078d7;background:#0078d7;color:#fff}.dim-panel__btn--primary:hover{background:#0069c0}

package/dist/types/components/spreader/{dropdown.vue.d.ts → components/dropdown.vue.d.ts}

@@ -1,27 +1,33 @@
-import type { FontOption } from './constants';
+import type { FontOption } from '../core/constants';
 type __VLS_Props = {
     modelValue: string | number;
     options: FontOption[];
     width?: string | number;
+    menuWidth?: string | number;
     visibleCount?: number;
     title?: string;
     modelOpen?: boolean;
     hideTrigger?: boolean;
+    align?: 'left' | 'right';
+    triggerEl?: HTMLElement | null;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "update:modelValue": (v: string | number) => any;
-    change: (v: string | number) => any;
-    "update:modelOpen": (v: boolean) => any;
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (v: string | number) => void;
+    change: (v: string | number) => void;
+    "update:modelOpen": (v: boolean) => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:modelValue"?: ((v: string | number) => any) | undefined;
     onChange?: ((v: string | number) => any) | undefined;
     "onUpdate:modelOpen"?: ((v: boolean) => any) | undefined;
 }>, {
     width: string | number;
+    menuWidth: string | number;
     visibleCount: number;
     title: string;
     modelOpen: boolean;
     hideTrigger: boolean;
+    align: "left" | "right";
+    triggerEl: HTMLElement | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {
     rootRef: HTMLDivElement;
     menuRef: HTMLDivElement;

package/dist/types/components/spreader/{borderPicker.vue.d.ts → components/pickers/borderPicker.vue.d.ts}

@@ -3,6 +3,7 @@ type __VLS_Props = {
     modelOpen?: boolean;
     locale?: string;
     currentBorder?: BorderType;
+    triggerEl?: HTMLElement | null;
 };
 declare function openMenu(): void;
 declare function close(): void;
@@ -18,9 +19,11 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, {
     "onUpdate:modelOpen"?: ((v: boolean) => any) | undefined;
 }>, {
     modelOpen: boolean;
+    triggerEl: HTMLElement | null;
     locale: string;
     currentBorder: BorderType;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {
     rootRef: HTMLDivElement;
+    menuRef: HTMLDivElement;
 }, HTMLDivElement>;
 export default _default;