@veltra/sheet 2.5.6 → 2.5.8

package/src/components/sheet/__test__/functions-popup.test.ts

@@ -0,0 +1,182 @@
+import {
+  listFormulaFunctions,
+  registerFormulaFunction
+} from '@veltra/sheet-core/core/formula/functions.js'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { createApp, h, nextTick, type App } from 'vue'
+
+import USheetFunctionsPopup from '../popups/functions-popup.vue'
+import { COMMON_FORMULA_NAMES, FUNCTION_POPUP_CATEGORIES } from '../use-formula-suggest'
+
+vi.mock('@veltra/desktop', async () => {
+  const { defineComponent, h } = await import('vue')
+  return {
+    UInput: defineComponent({
+      name: 'UInputStub',
+      props: ['modelValue'],
+      emits: ['update:modelValue'],
+      setup(props, { emit }) {
+        return () =>
+          h('input', {
+            class: 'search-stub',
+            value: props.modelValue as string,
+            onInput: (e: Event) => emit('update:modelValue', (e.target as HTMLInputElement).value)
+          })
+      }
+    }),
+    UScroll: defineComponent({
+      name: 'UScrollStub',
+      setup(_, { slots }) {
+        return () => h('div', { class: 'scroll-stub' }, slots.default?.())
+      }
+    })
+  }
+})
+
+const apps: App[] = []
+const containers: HTMLElement[] = []
+
+function mountPopup(onSelect?: (name: string) => void) {
+  const el = document.createElement('div')
+  document.body.appendChild(el)
+  containers.push(el)
+  const app = createApp({
+    setup() {
+      return () => h(USheetFunctionsPopup, onSelect ? { onSelect } : undefined)
+    }
+  })
+  app.mount(el)
+  apps.push(app)
+  return { el }
+}
+
+async function typeKeyword(el: HTMLElement, keyword: string): Promise<void> {
+  const input = el.querySelector<HTMLInputElement>('.search-stub')!
+  input.value = keyword
+  input.dispatchEvent(new Event('input'))
+  await Promise.resolve()
+}
+
+/** 点击左侧分类导航项（等一帧渲染） */
+async function clickCategory(el: HTMLElement, category: string): Promise<void> {
+  const item = [...el.querySelectorAll<HTMLButtonElement>('.u-sheet__functions-nav-item')].find(
+    (button) => button.textContent?.trim() === category
+  )
+  item!.click()
+  await nextTick()
+}
+
+function signatures(el: HTMLElement): (string | null)[] {
+  return [...el.querySelectorAll('.u-sheet__functions-signature')].map((node) => node.textContent)
+}
+
+function items(el: HTMLElement): HTMLElement[] {
+  return [...el.querySelectorAll<HTMLElement>('.u-sheet__functions-item')]
+}
+
+afterEach(() => {
+  apps.splice(0).forEach((app) => app.unmount())
+  containers.splice(0).forEach((el) => el.remove())
+  vi.clearAllMocks()
+})
+
+describe('USheetFunctionsPopup', () => {
+  it('分类导航渲染固定集合（顺序一致）；默认「常用」列全部常用函数', () => {
+    const { el } = mountPopup()
+    const navLabels = [...el.querySelectorAll('.u-sheet__functions-nav-item')].map(
+      (node) => node.textContent
+    )
+    expect(navLabels).toEqual([...FUNCTION_POPUP_CATEGORIES])
+
+    // 「常用」= 前端固定清单（COMMON_FORMULA_NAMES 顺序），全部内置注册 → 一一列出
+    expect(signatures(el).map((sig) => sig?.split('(')[0])).toEqual([...COMMON_FORMULA_NAMES])
+    expect(el.querySelector('.u-sheet__functions-nav-item')!.classList.contains('is-active')).toBe(
+      true
+    )
+  })
+
+  it('「全部」列出全部已注册函数；分类项只列声明该分类的函数', async () => {
+    registerFormulaFunction('MYTESTFN', {
+      meta: { params: ['value'], description: '测试未分类自定义函数' },
+      impl: () => 1
+    })
+    const { el } = mountPopup()
+
+    await clickCategory(el, '全部')
+    expect(items(el).length).toBe(listFormulaFunctions().length)
+    // 未分类函数仅出现在「全部」
+    expect(signatures(el)).toContain('MYTESTFN(value)')
+
+    await clickCategory(el, '数学')
+    const expected = listFormulaFunctions().filter((fn) => fn.category === '数学')
+    expect(items(el).length).toBe(expected.length)
+    expect(signatures(el)).toContain('SUM(number1, number2, ...)')
+    expect(signatures(el)).not.toContain('MYTESTFN(value)')
+
+    // 「常用」也不含未分类自定义函数
+    await clickCategory(el, '常用')
+    expect(signatures(el)).not.toContain('MYTESTFN(value)')
+  })
+
+  it('搜索跨分类（含未分类函数）：名称 / 描述大小写不敏感；无匹配显空态', async () => {
+    registerFormulaFunction('MYTESTFN', {
+      meta: { params: ['value'], description: '测试未分类自定义函数' },
+      impl: () => 1
+    })
+    const { el } = mountPopup()
+    await clickCategory(el, '数学')
+
+    // 在「数学」分类下搜索未分类函数名 → 仍可命中（跨分类）
+    await typeKeyword(el, 'mytest')
+    let names = signatures(el).map((sig) => sig?.split('(')[0])
+    expect(names).toEqual(['MYTESTFN'])
+
+    // 中文描述过滤（SUM：求参数之和）
+    await typeKeyword(el, '之和')
+    names = signatures(el).map((sig) => sig?.split('(')[0])
+    expect(names).toEqual(['SUM'])
+
+    // 无匹配 → 空态
+    await typeKeyword(el, '不存在的关键字zzz')
+    expect(el.querySelectorAll('.u-sheet__functions-item').length).toBe(0)
+    expect(el.querySelector('.u-sheet__functions-empty')?.textContent).toContain('无匹配函数')
+
+    // 清空关键词 → 回到当前分类（数学）
+    await typeKeyword(el, '')
+    expect(items(el).length).toBe(
+      listFormulaFunctions().filter((fn) => fn.category === '数学').length
+    )
+  })
+
+  it('点击函数项 → emit select(name)', () => {
+    const selected: string[] = []
+    const { el } = mountPopup((name) => selected.push(name))
+
+    items(el)[0]!.click()
+    expect(selected).toEqual(['SUM'])
+  })
+
+  it('键盘路径：↑↓ 移动高亮（循环），Enter 确认选中', async () => {
+    const selected: string[] = []
+    const { el } = mountPopup((name) => selected.push(name))
+    const panel = el.querySelector<HTMLElement>('.u-sheet__functions-panel')!
+
+    // 初始高亮第一项（SUM）
+    expect(items(el)[0]!.classList.contains('is-active')).toBe(true)
+
+    panel.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
+    await nextTick()
+    expect(items(el)[1]!.classList.contains('is-active')).toBe(true)
+
+    panel.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }))
+    expect(selected).toEqual(['AVERAGE'])
+
+    // ↑ 回到第一项，再 ↑ 循环到最后一项
+    panel.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
+    await nextTick()
+    expect(items(el)[0]!.classList.contains('is-active')).toBe(true)
+    panel.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
+    await nextTick()
+    expect(items(el).at(-1)!.classList.contains('is-active')).toBe(true)
+  })
+})

package/src/components/sheet/__test__/import-file.test.ts

@@ -1,5 +1,5 @@
-import type { Sheet } from '@veltra/sheet-core/core/sheet'
-import { Workbook } from '@veltra/sheet-core/core/workbook'
+import type { Sheet } from '@veltra/sheet-core/core/sheet.js'
+import { Workbook } from '@veltra/sheet-core/core/workbook.js'
 import { afterEach, describe, expect, it, vi } from 'vitest'
 import { ref } from 'vue'
 
@@ -36,7 +36,7 @@ const EMPTY_SNAPSHOT = {
 
 vi.mock('@veltra/desktop', () => ({ message: mocks.message, messageConfirm: mocks.messageConfirm }))
 
-vi.mock('@veltra/sheet-core/core/io/import', () => ({
+vi.mock('@veltra/sheet-core/core/io/import.js', () => ({
   importCsv: mocks.importCsv,
   importXlsx: mocks.importXlsx,
   replaceWorkbookWithSnapshots: mocks.replaceWorkbookWithSnapshots

package/src/components/sheet/__test__/insert-image-popup.test.ts

@@ -1,4 +1,4 @@
-import { Sheet } from '@veltra/sheet-core/core/sheet'
+import { Sheet } from '@veltra/sheet-core/core/sheet.js'
 import { afterEach, describe, expect, it, vi } from 'vitest'
 import { createApp, h, type App } from 'vue'
 

package/src/components/sheet/__test__/insert-image.test.ts

@@ -1,4 +1,4 @@
-import { Sheet } from '@veltra/sheet-core/core/sheet'
+import { Sheet } from '@veltra/sheet-core/core/sheet.js'
 import { afterEach, describe, expect, it, vi } from 'vitest'
 
 import { createSheetContext } from '../../../tools/context'

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

@@ -1,4 +1,4 @@
-import { Workbook } from '@veltra/sheet-core/core/workbook'
+import { Workbook } from '@veltra/sheet-core/core/workbook.js'
 import { afterEach, describe, expect, it, vi } from 'vitest'
 import { createApp, h, nextTick, ref, type App } from 'vue'
 
@@ -120,6 +120,7 @@ describe('USheet 组件', () => {
       'valign-bottom',
       'wrap-text',
       'find',
+      'functions',
       'insert-image',
       'import',
       'export'

package/src/components/sheet/__test__/sheet-context-menu.test.ts

@@ -1,5 +1,5 @@
-import { createRange } from '@veltra/sheet-core/core/address'
-import { Sheet } from '@veltra/sheet-core/core/sheet'
+import { createRange } from '@veltra/sheet-core/core/address.js'
+import { Sheet } from '@veltra/sheet-core/core/sheet.js'
 import { describe, expect, it } from 'vitest'
 
 import { createSheetContext } from '../../../tools/context'

package/src/components/sheet/__test__/use-formula-suggest.test.ts

@@ -1,4 +1,4 @@
-import { registerFormulaFunction } from '@veltra/sheet-core/core/formula/functions'
+import { registerFormulaFunction } from '@veltra/sheet-core/core/formula/functions.js'
 import { describe, expect, it } from 'vitest'
 
 import {
@@ -46,15 +46,16 @@ describe('getSuggestContext', () => {
 })
 
 describe('filterFormulaSuggestions / applySuggest / moveSuggestIndex', () => {
-  it('空前缀优先常用函数（含 SUM），至多 10 条；SU 过滤到 SUM', () => {
+  it('空前缀优先常用函数（含 SUM），至多 10 条；SU 过滤到 SUBSTITUTE / SUM（名称升序）', () => {
     const all = filterFormulaSuggestions('')
     expect(all.length).toBeGreaterThan(0)
     expect(all.length).toBeLessThanOrEqual(FORMULA_SUGGEST_LIMIT)
     expect(all[0]!.name).toBe('SUM')
     expect(all.map((s) => s.name)).toContain('SUM')
     const su = filterFormulaSuggestions('SU')
-    expect(su.map((s) => s.name)).toEqual(['SUM'])
-    expect(su[0]!.signature).toBe(formatFunctionSignature('SUM', su[0]!.params))
+    expect(su.map((s) => s.name)).toEqual(['SUBSTITUTE', 'SUM'])
+    const sum = su.find((s) => s.name === 'SUM')!
+    expect(sum.signature).toBe(formatFunctionSignature('SUM', sum.params))
   })
 
   it('无 meta 函数签名仅为名称', () => {

package/src/components/sheet/formula-bar.vue

@@ -10,7 +10,33 @@
       @blur="handleNameBlur"
       @keydown="handleNameKeydown"
     />
-    <span :class="cls.e('fx-label')">fx</span>
+    <button
+      ref="fxLabelRef"
+      type="button"
+      :class="cls.e('fx-label')"
+      :disabled="fxDisabled"
+      title="插入函数"
+      @mousedown.prevent
+      @click.stop="toggleFunctions"
+    >
+      fx
+    </button>
+    <!-- 函数弹框：锚定 fx 按钮下方（UDropdown Teleport 到 #pop-container，
+         同工具栏弹层机制）；打开 / 关闭不触碰选区与草稿 -->
+    <u-dropdown
+      ref="functionsDropdownRef"
+      trigger="custom"
+      :visible="functionsOpen"
+      width="auto"
+      @keydown="handleFunctionsKeydown"
+      @update:visible="syncFunctionsOpen"
+    >
+      <template #content>
+        <div v-if="functionsOpen" :class="cls.e('functions-popover')" @click.stop>
+          <u-sheet-functions-popup @select="handleFunctionSelect" />
+        </div>
+      </template>
+    </u-dropdown>
     <div
       :class="cls.e('fx-editor')"
       @mouseenter="handleFxMouseEnter"
@@ -68,16 +94,16 @@
 </template>
 
 <script lang="ts" setup>
-import { message } from '@veltra/desktop'
+import { message, UDropdown } from '@veltra/desktop'
 import {
   formatAddress,
   formatRange,
   parseRange,
   type CellAddress,
   type CellRange
-} from '@veltra/sheet-core/core/address'
-import type { SelectionState } from '@veltra/sheet-core/core/selection'
-import type { Sheet } from '@veltra/sheet-core/core/sheet'
+} from '@veltra/sheet-core/core/address.js'
+import type { SelectionState } from '@veltra/sheet-core/core/selection.js'
+import type { Sheet } from '@veltra/sheet-core/core/sheet.js'
 import { bem } from '@veltra/utils'
 import {
   computed,
@@ -92,6 +118,7 @@ import {
 
 import type { SheetContext } from '../../tools/context'
 import UFormulaSuggestList from './formula-suggest-list.vue'
+import USheetFunctionsPopup from './popups/functions-popup.vue'
 import { insertRefText, isRefSelectContext } from './use-formula-ref-select'
 import {
   applySuggest,
@@ -107,6 +134,7 @@ defineOptions({ name: 'UFormulaBar' })
  * 公式栏（名称框 + fx 输入栏），USheet 顶部结构之一。
  *
  * - 名称框：显示当前选区（单格 A1 / 区域 A1:B2）；合法地址回车跳转。
+ * - fx 按钮：打开函数弹框（分类导航 + 搜索），选中进入编辑态输出 `=NAME()`。
  * - fx 输入栏：活动格内容；Enter/✓ 提交、Esc/✗ 取消、失焦提交。
  * - 函数补全：`=` 开头且光标在函数名 token 上时弹出候选（↑↓ / Tab / Enter / 点击）。
  * - 引用选择：光标在运算符/`(`/`,` 后时，画布点选/拖选插入引用（blur 抑制防误提交）。
@@ -155,9 +183,9 @@ function beginBlurSuppress(): void {
   suppressBlurCommit = true
 }
 
-/** 选区拦截回调：插入 A1 / A1:B2 到光标处 */
+/** 选区拦截回调：插入 A1 / A1:B2 到光标处（仅引用选择模式；弹框打开但非引用上下文时不插入） */
 function handleRefSelect(range: CellRange): void {
-  if (!editing.value || mirroring.value) return
+  if (!isRefSelecting()) return
   const rangeText = formatRange(range)
   const el = fxRef.value
   const selEnd = el?.selectionEnd ?? fxCursor.value
@@ -432,7 +460,14 @@ function commitEdit(): void {
   editAddr = null
   suppressBlurCommit = false
   closeSuggest()
-  if (addr) props.context.setCellValue(addr, fxDraft.value)
+  if (addr) {
+    props.context.setCellValue(addr, fxDraft.value)
+    // 选区离开目标格（如编辑期间名称框跳转）：回推模型选区，grid 层随之恢复目标格高亮
+    const active = selection.value.activeCell
+    if (!active || active.row !== addr.row || active.col !== addr.col) {
+      props.context.selectCell(addr)
+    }
+  }
   refreshFx()
 }
 
@@ -490,7 +525,94 @@ function exitMirror(addr: CellAddress): void {
   }
 }
 
-defineExpose({ mirrorGridEdit, exitMirror, isRefSelecting, beginBlurSuppress, handleRefSelect })
+// ─── 函数弹框（fx 按钮）────────────────────────────────────
+
+const fxLabelRef = useTemplateRef<HTMLButtonElement>('fxLabelRef')
+const functionsDropdownRef = useTemplateRef<InstanceType<typeof UDropdown>>('functionsDropdownRef')
+const functionsOpen = ref(false)
+
+function toggleFunctions(): void {
+  if (fxDisabled.value) return
+  if (functionsOpen.value) {
+    functionsOpen.value = false
+    return
+  }
+  // 焦点即将移向弹框搜索框：抑制 fx blur 提交，草稿与编辑态原样保留
+  if (editing.value && fxFocused.value) suppressBlurCommit = true
+  functionsOpen.value = true
+}
+
+// 弹框打开必须同步调 open() 传 fx 按钮作锚点（同 sheet.vue 工具弹层时序）
+watch(functionsOpen, () => {
+  const dropdown = functionsDropdownRef.value
+  if (!dropdown) return
+  if (functionsOpen.value) {
+    dropdown.open({ trigger: fxLabelRef.value ?? undefined })
+  } else {
+    dropdown.close()
+  }
+})
+
+/** UDropdown 内部关闭（触发元素位移等）→ 同步本地开合状态 */
+function syncFunctionsOpen(visible: boolean): void {
+  if (!visible) functionsOpen.value = false
+}
+
+/** 弹框内 Esc 关闭（关闭不还原草稿、不退出挂起的编辑态） */
+function handleFunctionsKeydown(event: KeyboardEvent): void {
+  if (event.key !== 'Escape') return
+  event.preventDefault()
+  functionsOpen.value = false
+}
+
+/** 点击弹框外关闭（弹框内容与 fx 按钮均 @click.stop，到达这里的必是外部点击） */
+function closeFunctionsOnOuterClick(): void {
+  if (!functionsOpen.value) return
+  functionsOpen.value = false
+}
+
+/** 选中函数：关弹框并进入编辑态输出 =NAME()（fx / 工具栏共用路径） */
+function handleFunctionSelect(name: string): void {
+  functionsOpen.value = false
+  insertFunction(name)
+}
+
+/** 插入函数：编辑目标 = 当前活动格，内容覆盖为 =NAME()，光标落在括号内 */
+function insertFunction(name: string): void {
+  const addr = selection.value.activeCell
+  if (!addr) return
+  const text = `=${name}()`
+  const cursor = text.length - 1
+  editing.value = true
+  editAddr = addr
+  mirroring.value = false
+  mirrorAddr = null
+  fxDraft.value = text
+  fxCursor.value = cursor
+  suppressBlurCommit = false
+  closeSuggest()
+  void nextTick(() => {
+    const el = fxRef.value
+    if (!el) return
+    el.focus()
+    // focus 事件里 syncFxCursor 会读到置尾光标，这里用局部值落位覆盖
+    el.setSelectionRange(cursor, cursor)
+    fxCursor.value = cursor
+    autosizeFx()
+    // `=NAME()` 光标在括号内：处于引用选择上下文，不再弹补全
+    refreshSuggest()
+  })
+}
+
+defineExpose({
+  mirrorGridEdit,
+  exitMirror,
+  isRefSelecting,
+  isFunctionPopupOpen: () => functionsOpen.value,
+  beginBlurSuppress,
+  handleRefSelect,
+  insertFunction
+})
 
 // ─── 生命周期 ──────────────────────────────────────────────
 
@@ -512,6 +634,7 @@ watch(
     mirroring.value = false
     mirrorAddr = null
     suppressBlurCommit = false
+    functionsOpen.value = false
     closeSuggest()
     bindSheet(sheet)
     selection.value = sheet.getSelection()
@@ -525,10 +648,12 @@ onMounted(() => {
   selection.value = props.sheet.getSelection()
   refreshName()
   refreshFx()
+  window.addEventListener('click', closeFunctionsOnOuterClick)
 })
 
 onBeforeUnmount(() => {
   for (const off of dispose) off()
   dispose = []
+  window.removeEventListener('click', closeFunctionsOnOuterClick)
 })
 </script>

package/src/components/sheet/import-file.ts

@@ -3,9 +3,9 @@ import {
   importCsv,
   importXlsx,
   replaceWorkbookWithSnapshots
-} from '@veltra/sheet-core/core/io/import'
-import type { Sheet, SheetSnapshot } from '@veltra/sheet-core/core/sheet'
-import type { Workbook } from '@veltra/sheet-core/core/workbook'
+} from '@veltra/sheet-core/core/io/import.js'
+import type { Sheet, SheetSnapshot } from '@veltra/sheet-core/core/sheet.js'
+import type { Workbook } from '@veltra/sheet-core/core/workbook.js'
 import { nextFrame } from '@veltra/utils'
 import type { Ref } from 'vue'
 

package/src/components/sheet/insert-image.ts

@@ -1,5 +1,5 @@
 import { message } from '@veltra/desktop'
-import type { SheetImageAnchor, SheetImageType } from '@veltra/sheet-core/core/image'
+import type { SheetImageAnchor, SheetImageType } from '@veltra/sheet-core/core/image.js'
 
 import type { SheetContext } from '../../tools/context'
 

package/src/components/sheet/popup-helpers.ts

@@ -1,6 +1,6 @@
-import type { CellRange } from '@veltra/sheet-core/core/address'
-import type { BorderPreset } from '@veltra/sheet-core/core/style/border-presets'
-import { BORDER_STYLE_WIDTH, type BorderLineStyle } from '@veltra/sheet-core/core/style/types'
+import type { CellRange } from '@veltra/sheet-core/core/address.js'
+import type { BorderPreset } from '@veltra/sheet-core/core/style/border-presets.js'
+import { BORDER_STYLE_WIDTH, type BorderLineStyle } from '@veltra/sheet-core/core/style/types.js'
 
 import type { SheetContext } from '../../tools/context'
 

package/src/components/sheet/popups/border-popup.vue

@@ -35,14 +35,14 @@
 
 <script lang="ts" setup>
 import { UPalette } from '@veltra/desktop'
-import type { SetCellStyleItem } from '@veltra/sheet-core/core/command/set-cell-style'
-import { buildBorderPresetItems } from '@veltra/sheet-core/core/style/border-presets'
+import type { SetCellStyleItem } from '@veltra/sheet-core/core/command/set-cell-style.js'
+import { buildBorderPresetItems } from '@veltra/sheet-core/core/style/border-presets.js'
 import {
   BORDER_STYLE_WIDTH,
   type BorderEdge,
   type BorderLineStyle,
   type CellStylePatch
-} from '@veltra/sheet-core/core/style/types'
+} from '@veltra/sheet-core/core/style/types.js'
 import { bem } from '@veltra/utils'
 import { ref } from 'vue'
 

package/src/components/sheet/popups/find-popup.vue

@@ -69,7 +69,7 @@
 
 <script lang="ts" setup>
 import { UInput } from '@veltra/desktop'
-import type { Sheet } from '@veltra/sheet-core/core/sheet'
+import type { Sheet } from '@veltra/sheet-core/core/sheet.js'
 import { bem } from '@veltra/utils'
 
 import type { SheetContext } from '../../../tools/context'