@veltra/sheet 2.0.1 → 2.2.0

package/src/vue/__test__/sheet-component.test.ts

@@ -1,267 +0,0 @@
-import { afterEach, describe, expect, it } from 'vitest'
-import { createApp, h, nextTick, ref, type App } from 'vue'
-
-import { Workbook } from '../../core/workbook'
-import { USheet } from '../../index'
-import { registerTool, unregisterTool } from '../../tools/registry'
-import type { SheetExposed } from '../../types'
-
-const apps: App[] = []
-const containers: HTMLElement[] = []
-
-function mount(
-  props: () => Record<string, unknown> = () => ({}),
-  exposedRef?: { value: SheetExposed | undefined }
-) {
-  const el = document.createElement('div')
-  el.style.width = '800px'
-  el.style.height = '600px'
-  document.body.appendChild(el)
-  containers.push(el)
-  const app = createApp({
-    render: () =>
-      h(USheet, {
-        ...props(),
-        ref: (value: unknown) => {
-          if (exposedRef) exposedRef.value = value as SheetExposed | undefined
-        }
-      })
-  })
-  app.mount(el)
-  apps.push(app)
-  return { app, el }
-}
-
-function createWorkbook() {
-  const workbook = new Workbook()
-  workbook.addSheet('Sheet2')
-  return workbook
-}
-
-function toolButton(el: HTMLElement, title: string): HTMLButtonElement | undefined {
-  return [...el.querySelectorAll<HTMLButtonElement>('.u-sheet__tool')].find((button) =>
-    button.textContent?.includes(title)
-  )
-}
-
-function tabs(el: HTMLElement): HTMLButtonElement[] {
-  return [...el.querySelectorAll<HTMLButtonElement>('.u-sheet__tab')]
-}
-
-afterEach(() => {
-  while (apps.length) apps.pop()!.unmount()
-  while (containers.length) containers.pop()!.remove()
-})
-
-describe('USheet 组件', () => {
-  it('挂载：工具栏渲染内置工具（分组 + 分隔符），tabs 显示 sheet 列表，grid 挂载', async () => {
-    const { el } = mount(() => ({ workbook: createWorkbook(), rows: 10, cols: 6 }))
-    await nextTick()
-
-    const tools = [...el.querySelectorAll('.u-sheet__tool')].map((button) =>
-      button.textContent?.trim()
-    )
-    expect(tools).toEqual(['撤销', '重做', '合并', '取消合并'])
-    // history 与 cell 两组之间一个分隔符
-    expect(el.querySelectorAll('.u-sheet__toolbar-divider')).toHaveLength(1)
-
-    expect(tabs(el).map((tab) => tab.textContent?.trim())).toEqual(['Sheet1', 'Sheet2'])
-    expect(tabs(el)[0]!.classList.contains('is-active')).toBe(true)
-
-    // VTable 已挂载到 grid 容器
-    expect(el.querySelector('.u-sheet__grid canvas')).not.toBeNull()
-  })
-
-  it('内置 undo/redo 按钮随 history-change 置灰，点击等效快捷键', async () => {
-    const workbook = createWorkbook()
-    const sheet = workbook.activeSheet
-    const { el } = mount(() => ({ workbook, rows: 10, cols: 6 }))
-    await nextTick()
-
-    const undoButton = toolButton(el, '撤销')!
-    const redoButton = toolButton(el, '重做')!
-    expect(undoButton.disabled).toBe(true)
-    expect(redoButton.disabled).toBe(true)
-
-    sheet.setCellValue({ row: 0, col: 0 }, 'x')
-    await nextTick()
-    expect(undoButton.disabled).toBe(false)
-    expect(redoButton.disabled).toBe(true)
-
-    undoButton.click()
-    await nextTick()
-    expect(sheet.getCellData({ row: 0, col: 0 })).toBeUndefined()
-    expect(undoButton.disabled).toBe(true)
-    expect(redoButton.disabled).toBe(false)
-
-    redoButton.click()
-    await nextTick()
-    expect(sheet.getCellData({ row: 0, col: 0 })).toEqual({ v: 'x', t: 's' })
-  })
-
-  it('tab 切换：active 样式移动，工具上下文指向当前 sheet', async () => {
-    const workbook = createWorkbook()
-    const exposed: { value: SheetExposed | undefined } = { value: undefined }
-    const { el } = mount(() => ({ workbook, rows: 10, cols: 6 }), exposed)
-    await nextTick()
-
-    expect(exposed.value?.getActiveSheet().name).toBe('Sheet1')
-    expect(exposed.value?.getContext().sheetName).toBe('Sheet1')
-
-    tabs(el)[1]!.click()
-    await nextTick()
-
-    expect(tabs(el)[1]!.classList.contains('is-active')).toBe(true)
-    // grid 重建：旧 VTable 已 release，容器内只有一个 canvas
-    expect(el.querySelectorAll('.u-sheet__grid canvas')).toHaveLength(1)
-    expect(exposed.value?.getActiveSheet().name).toBe('Sheet2')
-    // 工具上下文（与工具按钮同一门面）指向切换后的 sheet
-    expect(exposed.value?.getContext().sheetName).toBe('Sheet2')
-
-    // grid 已重建到 Sheet2：写入 Sheet2 应在表格可见
-    workbook.getSheet('Sheet2')!.setCellValue({ row: 0, col: 0 }, 's2')
-    await nextTick()
-    expect(exposed.value?.getGrid()?.getTable().getCellValue(1, 1)).toBe('s2')
-  })
-
-  it('props 变更响应：showToolbar/showTabs 显隐，rows 变化重建 grid', async () => {
-    const workbook = createWorkbook()
-    const state = ref({ rows: 10, showToolbar: true, showTabs: true })
-    const exposed: { value: SheetExposed | undefined } = { value: undefined }
-    const { el } = mount(
-      () => ({
-        workbook,
-        rows: state.value.rows,
-        cols: 6,
-        showToolbar: state.value.showToolbar,
-        showTabs: state.value.showTabs
-      }),
-      exposed
-    )
-    await nextTick()
-
-    const gridBefore = exposed.value?.getGrid()
-    expect(gridBefore).toBeDefined()
-
-    state.value = { ...state.value, showToolbar: false, showTabs: false }
-    await nextTick()
-    expect(el.querySelector('.u-sheet__toolbar')).toBeNull()
-    expect(el.querySelector('.u-sheet__tabs')).toBeNull()
-
-    state.value = { ...state.value, rows: 20 }
-    await nextTick()
-    const gridAfter = exposed.value?.getGrid()
-    expect(gridAfter).toBeDefined()
-    expect(gridAfter).not.toBe(gridBefore)
-  })
-
-  it('workbook prop 变更：tabs 与 grid 切到新工作簿', async () => {
-    const workbook1 = createWorkbook()
-    const workbook2 = new Workbook()
-    workbook2.addSheet('数据表')
-    const current = ref(workbook1)
-    const { el } = mount(() => ({ workbook: current.value, rows: 10, cols: 6 }))
-    await nextTick()
-    expect(tabs(el).map((tab) => tab.textContent?.trim())).toEqual(['Sheet1', 'Sheet2'])
-
-    current.value = workbook2
-    await nextTick()
-    expect(tabs(el).map((tab) => tab.textContent?.trim())).toEqual(['Sheet1', '数据表'])
-    expect(el.querySelector('.u-sheet__grid canvas')).not.toBeNull()
-  })
-
-  it('注册表联动：运行时 register/unregister 工具即时增删按钮', async () => {
-    const { el } = mount(() => ({ workbook: createWorkbook(), rows: 10, cols: 6 }))
-    await nextTick()
-    expect(toolButton(el, '临时工具')).toBeUndefined()
-
-    registerTool({ id: 'temp-tool', title: '临时工具', onClick: () => {} })
-    await nextTick()
-    expect(toolButton(el, '临时工具')).toBeDefined()
-
-    expect(unregisterTool('temp-tool')).toBe(true)
-    await nextTick()
-    expect(toolButton(el, '临时工具')).toBeUndefined()
-  })
-
-  it('无 props 默认挂载：内部自建工作簿（单 sheet），工具栏/tabs 正常', async () => {
-    const { el } = mount()
-    await nextTick()
-    expect(tabs(el).map((tab) => tab.textContent?.trim())).toEqual(['Sheet1'])
-    expect(el.querySelectorAll('.u-sheet__tool').length).toBeGreaterThan(0)
-    expect(el.querySelector('.u-sheet__grid canvas')).not.toBeNull()
-  })
-
-  it('多实例并存：共享注册表，工具点击只作用于各自实例的活动 sheet', async () => {
-    const workbook1 = new Workbook()
-    const workbook2 = new Workbook()
-    const first = mount(() => ({ workbook: workbook1, rows: 10, cols: 6 }))
-    const second = mount(() => ({ workbook: workbook2, rows: 10, cols: 6 }))
-    await nextTick()
-
-    registerTool({
-      id: 'mark-active',
-      title: '标记当前格',
-      onClick: (ctx) => {
-        const active = ctx.getSelection().activeCell ?? { row: 0, col: 0 }
-        ctx.setCellValue(active, 'marked')
-      }
-    })
-    await nextTick()
-
-    // 两个实例都渲染该工具（注册表全局共享）
-    const button1 = toolButton(first.el, '标记当前格')
-    const button2 = toolButton(second.el, '标记当前格')
-    expect(button1).toBeDefined()
-    expect(button2).toBeDefined()
-
-    // 点击实例 2 的工具 → 只写实例 2 的 sheet（各自 SheetContext 绑定各自工作簿）
-    workbook2.activeSheet.selectCell({ row: 2, col: 1 })
-    await nextTick()
-    button2!.click()
-    await nextTick()
-    expect(workbook2.activeSheet.getCellData({ row: 2, col: 1 })).toEqual({ v: 'marked', t: 's' })
-    expect(workbook1.activeSheet.getCellData({ row: 2, col: 1 })).toBeUndefined()
-
-    // 该写入经命令系统：实例 2 的 undo 可用且可撤销
-    expect(workbook2.activeSheet.canUndo).toBe(true)
-    workbook2.activeSheet.undo()
-    expect(workbook2.activeSheet.getCellData({ row: 2, col: 1 })).toBeUndefined()
-
-    unregisterTool('mark-active')
-  })
-
-  it('合并/取消合并按钮随选区联动，点击生效且可 undo', async () => {
-    const workbook = new Workbook()
-    const sheet = workbook.activeSheet
-    const { el } = mount(() => ({ workbook, rows: 10, cols: 6 }))
-    await nextTick()
-
-    const mergeButton = toolButton(el, '合并')!
-    const unmergeButton = toolButton(el, '取消合并')!
-    // 无选区：两者禁用
-    expect(mergeButton.disabled).toBe(true)
-    expect(unmergeButton.disabled).toBe(true)
-
-    // 拖选区域（经模型 API 模拟 grid 拖选回写）
-    sheet.selectRange({ start: { row: 0, col: 0 }, end: { row: 1, col: 1 } })
-    await nextTick()
-    expect(mergeButton.disabled).toBe(false)
-
-    mergeButton.click()
-    await nextTick()
-    expect(sheet.getCellInfo({ row: 1, col: 1 }).kind).toBe('merged-covered')
-
-    // 选中合并锚点 → 取消合并可用
-    sheet.selectCell({ row: 0, col: 0 })
-    await nextTick()
-    expect(unmergeButton.disabled).toBe(false)
-
-    unmergeButton.click()
-    await nextTick()
-    expect(sheet.getCellInfo({ row: 1, col: 1 }).kind).toBe('normal')
-
-    sheet.undo()
-    expect(sheet.getCellInfo({ row: 1, col: 1 }).kind).toBe('merged-covered')
-  })
-})

package/src/vue/sheet.vue

@@ -1,235 +0,0 @@
-<template>
-  <div :class="cls.b">
-    <div v-if="showToolbar" :class="cls.e('toolbar')">
-      <template v-for="(group, groupIndex) in toolGroups" :key="group.name">
-        <span v-if="groupIndex > 0" :class="cls.e('toolbar-divider')" />
-        <button
-          v-for="item in group.tools"
-          :key="item.tool.id"
-          type="button"
-          :class="cls.e('tool')"
-          :disabled="item.disabled"
-          :title="item.tool.tooltip ?? item.tool.title"
-          @click="handleToolClick(item.tool)"
-        >
-          <component :is="item.tool.icon" v-if="item.tool.icon" :class="cls.e('tool-icon')" />
-          <span>{{ item.tool.title }}</span>
-        </button>
-      </template>
-    </div>
-
-    <div ref="gridRef" :class="cls.e('grid')" />
-
-    <div v-if="showTabs" :class="cls.e('tabs')">
-      <button
-        v-for="(sheet, index) in sheetList"
-        :key="sheet.name"
-        type="button"
-        :class="[cls.e('tab'), bem.is('active', index === activeIndex)]"
-        @click="handleTabClick(index)"
-      >
-        {{ sheet.name }}
-      </button>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { contextmenu } from '@veltra/desktop'
-import { bem } from '@veltra/utils'
-import { computed, onBeforeUnmount, onMounted, ref, shallowRef, useTemplateRef, watch } from 'vue'
-
-import { rangeContainsAddress } from '../core/address'
-import type { Sheet } from '../core/sheet'
-import { Workbook } from '../core/workbook'
-import { SheetGrid, type SheetGridContextMenuInfo } from '../grid/sheet-grid'
-import { createSheetContext } from '../tools/context'
-import { defaultToolRegistry, type SheetTool } from '../tools/registry'
-import type { SheetEmits, SheetProps, _SheetExposed } from '../types'
-
-defineOptions({ name: 'USheet' })
-
-const props = withDefaults(defineProps<SheetProps>(), {
-  rows: 100,
-  cols: 26,
-  showToolbar: true,
-  showTabs: true
-})
-
-const emit = defineEmits<SheetEmits>()
-
-const cls = bem('sheet')
-
-/** 工作簿：外部传入或内部自建（单 sheet） */
-const internalWorkbook = new Workbook()
-const workbook = computed(() => props.workbook ?? internalWorkbook)
-
-/** 激活 sheet 索引（镜像 workbook.activeSheetIndex，经事件同步） */
-const activeIndex = ref(workbook.value.activeSheetIndex)
-/** sheet 列表（tabs 渲染；由 sheets-change 同步） */
-const sheetList = shallowRef<Sheet[]>(workbook.value.getSheets())
-const activeSheet = computed(() => sheetList.value[activeIndex.value] ?? workbook.value.activeSheet)
-
-/** 工具上下文：动态解析活动 sheet，tab 切换后自动指向当前 sheet */
-const context = createSheetContext(() => activeSheet.value)
-
-const gridRef = useTemplateRef<HTMLElement>('gridRef')
-let grid: SheetGrid | undefined
-
-// ─── 工具栏状态刷新 ─────────────────────────────────────────
-// 工具 visible/disabled 是 (ctx) => boolean 纯函数，状态源变化时 bump 触发重算
-
-const stateTick = ref(0)
-const bump = (): void => {
-  stateTick.value++
-}
-
-let disposeSheetEvents: (() => void)[] = []
-/** 订阅活动 sheet 的状态源（tab 切换 / 工作簿变更时重绑） */
-function bindSheetEvents(sheet: Sheet): void {
-  for (const dispose of disposeSheetEvents) dispose()
-  disposeSheetEvents = [
-    sheet.on('selection-change', bump),
-    sheet.on('history-change', bump),
-    sheet.on('cell-change', bump),
-    sheet.on('merge-change', bump)
-  ]
-}
-
-let disposeWorkbookEvents: (() => void)[] = []
-function bindWorkbookEvents(wb: Workbook): void {
-  for (const dispose of disposeWorkbookEvents) dispose()
-  disposeWorkbookEvents = [
-    wb.on('sheets-change', ({ sheets }) => {
-      sheetList.value = sheets
-      bump()
-    }),
-    wb.on('active-sheet-change', ({ sheet, index }) => {
-      activeIndex.value = index
-      bindSheetEvents(sheet)
-      rebuildGrid()
-      bump()
-      emit('active-sheet-change', { sheet, index })
-    })
-  ]
-}
-
-const offRegistryChange = defaultToolRegistry.onChange(bump)
-
-// ─── 工具栏 ────────────────────────────────────────────────
-
-const toolGroups = computed(() => {
-  void stateTick.value // 依赖状态源：选区 / 历史 / 单元格 / 合并 / 注册表
-  return defaultToolRegistry
-    .getGroups()
-    .map((group) => ({
-      name: group.name,
-      tools: group.tools
-        .map((tool) => ({
-          tool,
-          visible: tool.visible?.(context) ?? true,
-          disabled: tool.disabled?.(context) ?? false
-        }))
-        .filter((item) => item.visible)
-    }))
-    .filter((group) => group.tools.length > 0)
-})
-
-function handleToolClick(tool: SheetTool): void {
-  if (tool.disabled?.(context)) return
-  tool.onClick(context)
-}
-
-// ─── sheet tabs ─────────────────────────────────────────────
-
-function handleTabClick(index: number): void {
-  if (index === activeIndex.value) return
-  const sheet = sheetList.value[index]
-  if (sheet) workbook.value.activateSheet(sheet.name)
-}
-
-// ─── 右键菜单（合并 / 取消合并，语义对齐内置工具）────────────
-
-function handleContextMenu(info: SheetGridContextMenuInfo): void {
-  // body 格：若点击落在当前选区外则先选中该格；行号/列头保留当前选区
-  if (info.addr) {
-    const inSelection = context
-      .getSelection()
-      .ranges.some((range) => rangeContainsAddress(range, info.addr!))
-    if (!inSelection) context.selectCell(info.addr)
-  }
-
-  const mergeTool = defaultToolRegistry.get('merge')
-  const unmergeTool = defaultToolRegistry.get('unmerge')
-
-  contextmenu.pop({
-    mousePosition: { x: info.x, y: info.y },
-    width: 180,
-    menus: [
-      {
-        label: '合并单元格',
-        disabled: mergeTool?.disabled?.(context) ?? true,
-        callback: () => mergeTool?.onClick(context)
-      },
-      {
-        label: '取消合并单元格',
-        disabled: unmergeTool?.disabled?.(context) ?? true,
-        callback: () => unmergeTool?.onClick(context)
-      }
-    ]
-  })
-}
-
-// ─── grid 生命周期 ──────────────────────────────────────────
-
-function rebuildGrid(): void {
-  const container = gridRef.value
-  if (!container) return
-  grid?.release()
-  grid = new SheetGrid({
-    container,
-    sheet: activeSheet.value,
-    rows: props.rows,
-    cols: props.cols,
-    onContextMenu: handleContextMenu
-  })
-}
-
-onMounted(() => {
-  bindWorkbookEvents(workbook.value)
-  bindSheetEvents(activeSheet.value)
-  rebuildGrid()
-})
-
-watch(() => [props.rows, props.cols], rebuildGrid)
-
-watch(
-  () => props.workbook,
-  (wb, prev) => {
-    if (wb === prev) return
-    activeIndex.value = workbook.value.activeSheetIndex
-    sheetList.value = workbook.value.getSheets()
-    bindWorkbookEvents(workbook.value)
-    bindSheetEvents(activeSheet.value)
-    rebuildGrid()
-    bump()
-  }
-)
-
-onBeforeUnmount(() => {
-  offRegistryChange()
-  for (const dispose of disposeWorkbookEvents) dispose()
-  for (const dispose of disposeSheetEvents) dispose()
-  grid?.release()
-  grid = undefined
-})
-
-const exposed: _SheetExposed = {
-  workbook,
-  getActiveSheet: () => activeSheet.value,
-  getContext: () => context,
-  getGrid: () => grid
-}
-
-defineExpose(exposed)
-</script>

package/src/vue/style.scss

@@ -1,94 +0,0 @@
-@use 'pkg:@veltra/styles/mixins' as m;
-@use 'pkg:@veltra/styles/functions' as fn;
-
-@include m.b(sheet) {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  border: fn.use-var(border);
-  border-radius: fn.use-var(radius, default);
-  background-color: fn.use-var(bg-color, top);
-
-  @include m.e(toolbar) {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: fn.use-var(gap, small);
-    padding: fn.use-var(gap, small);
-    border-bottom: 1px solid fn.use-var(border, muted-color);
-  }
-
-  @include m.e(toolbar-divider) {
-    width: 1px;
-    align-self: stretch;
-    margin: 2px 0;
-    background-color: fn.use-var(border, muted-color);
-  }
-
-  @include m.e(tool) {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    height: fn.use-var(form-component-height, small);
-    padding: 0 8px;
-    border: none;
-    border-radius: fn.use-var(radius, small);
-    background: transparent;
-    color: fn.use-var(text-color, main);
-    font-size: fn.use-var(font-size-main, small);
-    white-space: nowrap;
-    cursor: pointer;
-    transition:
-      background-color fn.use-var(transition, fast) fn.use-var(transition, ease),
-      color fn.use-var(transition, fast) fn.use-var(transition, ease);
-
-    &:hover:not(:disabled) {
-      background-color: fn.use-var(bg-color, hover);
-    }
-
-    &:disabled {
-      color: fn.use-var(text-color, disabled);
-      cursor: not-allowed;
-    }
-  }
-
-  @include m.e(tool-icon) {
-    font-size: calc(fn.use-var(font-size-main, small) + 2px);
-  }
-
-  @include m.e(grid) {
-    flex: 1;
-    min-height: 0;
-  }
-
-  @include m.e(tabs) {
-    display: flex;
-    align-items: center;
-    gap: 2px;
-    padding: 2px fn.use-var(gap, small);
-    border-top: 1px solid fn.use-var(border, muted-color);
-    background-color: fn.use-var(bg-color, middle);
-  }
-
-  @include m.e(tab) {
-    padding: 4px 12px;
-    border: none;
-    border-radius: fn.use-var(radius, small);
-    background: transparent;
-    color: fn.use-var(text-color, second);
-    font-size: fn.use-var(font-size-main, small);
-    cursor: pointer;
-    transition:
-      background-color fn.use-var(transition, fast) fn.use-var(transition, ease),
-      color fn.use-var(transition, fast) fn.use-var(transition, ease);
-
-    &:hover {
-      background-color: fn.use-var(bg-color, hover);
-    }
-
-    @include m.is(active) {
-      background-color: fn.use-var(bg-color, top);
-      color: fn.use-var(color, primary);
-    }
-  }
-}

package/src/vue/style.ts

@@ -1,2 +0,0 @@
-import '@veltra/desktop/components/contextmenu/style'
-import './style.scss'