@veltra/desktop 1.0.13 → 1.0.14

package/src/components/expression-editor/__test__/chip.test.ts

@@ -0,0 +1,86 @@
+// @vitest-environment happy-dom
+import { describe, expect, it, vi } from 'vitest'
+
+import { ChipAttrs, createChip, isChipElement, readChipValue, setChipFocused } from '../core/chip'
+
+// 本地最小 BEM 实例：避免引入 @veltra/utils → vue 间接依赖在 happy-dom 环境下触发 .d.mts 解析失败
+const B = 'u-expression-editor'
+const cls = {
+  b: B,
+  e: (n: string) => `${B}__${n}`,
+  m: (n: string) => `${B}--${n}`,
+  em: (e: string, m: string) => `${B}__${e}--${m}`,
+  create: () => cls
+} as any
+
+function makeChip(overrides: Partial<{ value: string; label: string; type?: string }> = {}) {
+  const onRemove = vi.fn<(el: HTMLElement) => void>()
+  const onReselect = vi.fn<(el: HTMLElement) => void>()
+  const segment = {
+    kind: 'var' as const,
+    value: overrides.value ?? 'form.user.name',
+    label: overrides.label ?? '用户姓名',
+    ...(overrides.type ? { type: overrides.type } : {})
+  }
+  const el = createChip(segment, { cls, onRemove, onReselect })
+  return { el, onRemove, onReselect, segment }
+}
+
+describe('createChip', () => {
+  it('renders chip with data-seg, data-value and contenteditable=false', () => {
+    const { el, segment } = makeChip()
+    expect(el.getAttribute(ChipAttrs.seg)).toBe('var')
+    expect(el.getAttribute(ChipAttrs.value)).toBe(segment.value)
+    expect(el.getAttribute('contenteditable')).toBe('false')
+    expect(el.className).toContain('u-expression-editor__chip')
+  })
+
+  it('renders label with type suffix when type provided', () => {
+    const { el } = makeChip({ value: 'x', label: '名称', type: 'string' })
+    expect(el.textContent).toContain('名称 (string)')
+  })
+
+  it('renders label without type suffix when type is absent', () => {
+    const { el } = makeChip({ value: 'x', label: '名称' })
+    expect(el.textContent).toContain('名称')
+    expect(el.textContent).not.toContain('(')
+  })
+
+  it('isChipElement detects chip nodes', () => {
+    const { el } = makeChip()
+    expect(isChipElement(el)).toBe(true)
+    expect(isChipElement(document.createElement('span'))).toBe(false)
+    expect(isChipElement(null)).toBe(false)
+  })
+
+  it('mousedown on chip body triggers onReselect', () => {
+    const { el, onReselect, onRemove } = makeChip()
+    const label = el.querySelector(`.${cls.e('chip-label')}`) as HTMLElement
+    label.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }))
+    expect(onReselect).toHaveBeenCalledTimes(1)
+    expect(onReselect).toHaveBeenCalledWith(el)
+    expect(onRemove).not.toHaveBeenCalled()
+  })
+
+  it('mousedown on close (×) triggers onRemove and not onReselect', () => {
+    const { el, onReselect, onRemove } = makeChip()
+    const close = el.querySelector(`[${ChipAttrs.close}]`) as HTMLElement
+    close.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }))
+    expect(onRemove).toHaveBeenCalledTimes(1)
+    expect(onRemove).toHaveBeenCalledWith(el)
+    expect(onReselect).not.toHaveBeenCalled()
+  })
+
+  it('readChipValue returns the bound value', () => {
+    const { el } = makeChip({ value: 'a.b.c' })
+    expect(readChipValue(el)).toBe('a.b.c')
+  })
+
+  it('setChipFocused toggles is-focused class', () => {
+    const { el } = makeChip()
+    setChipFocused(el, true)
+    expect(el.classList.contains('is-focused')).toBe(true)
+    setChipFocused(el, false)
+    expect(el.classList.contains('is-focused')).toBe(false)
+  })
+})

package/src/components/expression-editor/__test__/mention.test.ts

@@ -0,0 +1,122 @@
+import { describe, expect, it } from 'vitest'
+
+import { createMention } from '../core/mention'
+import { parse, type Doc } from '../core/model'
+
+function docFromText(text: string): Doc {
+  return parse(text)
+}
+
+describe('mention state machine', () => {
+  it('idle: empty doc and caret=null → no mention', () => {
+    const m = createMention()
+    expect(m.update([], null)).toBeNull()
+    expect(m.getState()).toBeNull()
+  })
+
+  it('typing @ activates mention with empty filter', () => {
+    const m = createMention()
+    const doc = docFromText('hello@')
+    const s = m.update(doc, 6)
+    expect(s).toEqual({ anchorOffset: 5, filter: '' })
+  })
+
+  it('typing characters after @ extends filter', () => {
+    const m = createMention()
+    const doc = docFromText('hello@form')
+    const s = m.update(doc, 10)
+    expect(s).toEqual({ anchorOffset: 5, filter: 'form' })
+  })
+
+  it('typing whitespace exits mention (no activation)', () => {
+    const m = createMention()
+    const doc = docFromText('hello@form ')
+    const s = m.update(doc, 11)
+    expect(s).toBeNull()
+  })
+
+  it('moving caret to before @ returns null', () => {
+    const m = createMention()
+    const doc = docFromText('hello@form')
+    expect(m.update(doc, 4)).toBeNull()
+  })
+
+  it('typing a second @ resets anchor to the new @', () => {
+    const m = createMention()
+    let doc = docFromText('hello@form')
+    expect(m.update(doc, 10)).toEqual({ anchorOffset: 5, filter: 'form' })
+    doc = docFromText('hello@form@user')
+    const s = m.update(doc, 15)
+    expect(s).toEqual({ anchorOffset: 10, filter: 'user' })
+  })
+
+  it('Backspace shrinking filter still keeps mention active', () => {
+    const m = createMention()
+    let doc = docFromText('hello@form')
+    expect(m.update(doc, 10)).toEqual({ anchorOffset: 5, filter: 'form' })
+    doc = docFromText('hello@for')
+    expect(m.update(doc, 9)).toEqual({ anchorOffset: 5, filter: 'for' })
+  })
+
+  it('Backspace through the @ exits mention', () => {
+    const m = createMention()
+    let doc = docFromText('hello@')
+    expect(m.update(doc, 6)).toEqual({ anchorOffset: 5, filter: '' })
+    doc = docFromText('hello')
+    expect(m.update(doc, 5)).toBeNull()
+  })
+
+  it('Esc / space / arrow → dismiss(): same anchor cannot reactivate by sync', () => {
+    const m = createMention()
+    let doc = docFromText('hello@form')
+    expect(m.update(doc, 10)).toEqual({ anchorOffset: 5, filter: 'form' })
+    m.dismiss()
+    expect(m.getState()).toBeNull()
+
+    // 用户继续在同一处键入字符
+    doc = docFromText('hello@formx')
+    expect(m.update(doc, 11)).toBeNull()
+    // 移动光标也不会重新激活
+    expect(m.update(doc, 9)).toBeNull()
+  })
+
+  it('after dismiss(), inserting a new @ creates a new mention with new anchor', () => {
+    const m = createMention()
+    let doc = docFromText('hello@form')
+    m.update(doc, 10)
+    m.dismiss()
+    doc = docFromText('hello@form @x')
+    const s = m.update(doc, 13)
+    expect(s).toEqual({ anchorOffset: 11, filter: 'x' })
+  })
+
+  it('mention does not span across a chip boundary', () => {
+    const m = createMention()
+    // 文本 "@a" + chip "{x}" + 文本 "@b" → 新 anchor 应是第二个 @
+    const doc: Doc = [
+      { kind: 'text', value: '@a' },
+      { kind: 'var', value: 'x', label: 'x' },
+      { kind: 'text', value: '@b' }
+    ]
+    // 序列化后："@a{x}@b"，caret 在 '@b' 后即 offset=2+3+2=7
+    const s = m.update(doc, 7)
+    expect(s).toEqual({ anchorOffset: 5, filter: 'b' })
+  })
+
+  it('caret at very end (text segment) activates mention', () => {
+    const m = createMention()
+    const doc = docFromText('@')
+    expect(m.update(doc, 1)).toEqual({ anchorOffset: 0, filter: '' })
+  })
+
+  it('commit() clears dismissedAnchor so next sync can produce fresh state', () => {
+    const m = createMention()
+    let doc = docFromText('hello@form')
+    m.update(doc, 10)
+    m.commit()
+
+    doc = docFromText('hello@form@')
+    const s = m.update(doc, 11)
+    expect(s).toEqual({ anchorOffset: 10, filter: '' })
+  })
+})

package/src/components/expression-editor/__test__/model.test.ts

@@ -0,0 +1,127 @@
+import { describe, expect, it } from 'vitest'
+
+import { normalize, parse, serialize, splitAt, type Doc } from '../core/model'
+
+function roundTrip(input: string): string {
+  return serialize(parse(input))
+}
+
+describe('parse / serialize round-trip', () => {
+  it('round-trips empty string', () => {
+    expect(roundTrip('')).toBe('')
+  })
+
+  it('round-trips plain text without variables', () => {
+    expect(roundTrip('hello')).toBe('hello')
+  })
+
+  it('round-trips a single variable', () => {
+    expect(roundTrip('{a}')).toBe('{a}')
+  })
+
+  it('round-trips text with one variable in middle', () => {
+    expect(roundTrip('hello{foo}world')).toBe('hello{foo}world')
+  })
+
+  it('round-trips text with prefix and suffix around a variable', () => {
+    expect(roundTrip('prefix{a}suffix')).toBe('prefix{a}suffix')
+  })
+
+  it('round-trips adjacent variables', () => {
+    expect(roundTrip('{a}{b}')).toBe('{a}{b}')
+  })
+
+  it('preserves text containing an unclosed brace as plain text', () => {
+    expect(roundTrip('hello{unclosed')).toBe('hello{unclosed')
+  })
+
+  it('round-trips multi-line content with variables', () => {
+    const input = '行一{form.user.name}\n行二{form.company.name}\n行三'
+    expect(roundTrip(input)).toBe(input)
+  })
+
+  it('round-trips with dotted variable paths', () => {
+    expect(roundTrip('你好{form.user.name}')).toBe('你好{form.user.name}')
+  })
+})
+
+describe('parse with variableMap fills label/type', () => {
+  it('attaches label/type from map for known variables', () => {
+    const map = new Map([
+      ['form.user.name', { label: '用户姓名', value: 'form.user.name', type: 'string' }]
+    ])
+    const doc = parse('{form.user.name}', map)
+    expect(doc).toEqual([
+      { kind: 'var', value: 'form.user.name', label: '用户姓名', type: 'string' }
+    ])
+  })
+
+  it('falls back to value when not found in map', () => {
+    const doc = parse('{unknown}')
+    expect(doc).toEqual([{ kind: 'var', value: 'unknown', label: 'unknown' }])
+  })
+})
+
+describe('normalize', () => {
+  it('merges adjacent text segments', () => {
+    const doc: Doc = [
+      { kind: 'text', value: 'a' },
+      { kind: 'text', value: 'b' },
+      { kind: 'text', value: 'c' }
+    ]
+    expect(normalize(doc)).toEqual([{ kind: 'text', value: 'abc' }])
+  })
+
+  it('drops empty text segments', () => {
+    const doc: Doc = [
+      { kind: 'text', value: '' },
+      { kind: 'var', value: 'x', label: 'X' },
+      { kind: 'text', value: '' }
+    ]
+    expect(normalize(doc)).toEqual([{ kind: 'var', value: 'x', label: 'X' }])
+  })
+
+  it('keeps a single text segment as is', () => {
+    const doc: Doc = [{ kind: 'text', value: 'hi' }]
+    expect(normalize(doc)).toEqual([{ kind: 'text', value: 'hi' }])
+  })
+})
+
+describe('splitAt', () => {
+  it('splits inside a text segment', () => {
+    const doc = parse('hello world')
+    const { before, after } = splitAt(doc, 5)
+    expect(before).toEqual([{ kind: 'text', value: 'hello' }])
+    expect(after).toEqual([{ kind: 'text', value: ' world' }])
+  })
+
+  it('treats a variable as atomic and never splits inside', () => {
+    const doc = parse('a{x}b')
+    const { before, after } = splitAt(doc, 2) // 落到 {x} 内部
+    expect(before).toEqual([{ kind: 'text', value: 'a' }])
+    expect(after).toEqual([
+      { kind: 'var', value: 'x', label: 'x' },
+      { kind: 'text', value: 'b' }
+    ])
+  })
+
+  it('splits exactly at variable boundary', () => {
+    const doc = parse('a{x}b')
+    const split = splitAt(doc, 1)
+    expect(split.before).toEqual([{ kind: 'text', value: 'a' }])
+    expect(split.after).toEqual([
+      { kind: 'var', value: 'x', label: 'x' },
+      { kind: 'text', value: 'b' }
+    ])
+  })
+
+  it('returns full doc on the right when offset is 0', () => {
+    const doc = parse('hello')
+    expect(splitAt(doc, 0)).toEqual({ before: [], after: [{ kind: 'text', value: 'hello' }] })
+  })
+
+  it('returns full doc on the left when offset >= length', () => {
+    const doc = parse('hello')
+    expect(splitAt(doc, 100)).toEqual({ before: [{ kind: 'text', value: 'hello' }], after: [] })
+  })
+})

package/src/components/expression-editor/components/path-preview.vue

@@ -0,0 +1,32 @@
+<template>
+  <div :class="cls.e('path-preview')">
+    <div :class="cls.e('path-preview-title')">变量路径</div>
+    <ul :class="cls.e('path-tree')">
+      <li
+        v-for="(node, i) in path"
+        :key="`${i}-${node.value || node.label}`"
+        :class="[cls.e('path-tree-item'), bem.is('active', i === path.length - 1)]"
+        :style="{ paddingLeft: `${i * 14}px` }"
+      >
+        <span v-if="i > 0" :class="cls.e('path-tree-branch')">└</span>
+        <span :class="cls.e('path-tree-label')">{{ node.label }}</span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { bem } from '@veltra/utils'
+
+import type { VariableItem } from '../../../types'
+
+defineOptions({
+  name: 'ExpressionPathPreview'
+})
+
+defineProps<{
+  path: VariableItem[]
+}>()
+
+const cls = bem('expression-editor')
+</script>